@font-face{font-family:GenSen;src:url('GenSenRoundedTW-B-01.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap} body,button,input,textarea,select{font-family:GenSen,sans-serif!important} .preview-video{display:none!important} .material-card video{display:none!important}.material-a,.material-b{background:linear-gradient(135deg,#e8e6e0,#f5f3ef 52%,#d8d5ce)}.material-a:before,.material-b:before{content:'MATERIAL / 01';display:grid;place-items:center;height:100%;color:#8d8880;font-size:12px;letter-spacing:.2em}.material-b:before{content:'MATERIAL / 02';background:linear-gradient(145deg,#dedbd3,#f4f2ed 55%,#cfcac1)}.material-card.is-playing{transform:rotate(0) scale(1.03)} .home-page{background:var(--paper);color:var(--ink)}.home-page .home-copy{z-index:3;pointer-events:none}.home-page .home-copy h1{font-size:clamp(30px,4vw,58px);letter-spacing:.08em;font-weight:500;margin:25px 0 14px}.home-page .home-sub{font-size:16px;line-height:1.8;max-width:190px}.home-page .enter-link{pointer-events:auto;font-size:12px}.visual-board{z-index:2}.material-grid{position:relative;width:100%;height:100%;min-height:470px}.material-card{position:absolute;border:0;padding:0;background:transparent;text-align:left;cursor:pointer;transition:transform .5s,filter .5s;box-shadow:0 12px 30px #19181712}.material-card video,.material-empty{display:block;width:100%;height:100%;object-fit:cover}.material-card span{position:absolute;left:12px;bottom:10px;color:#fff;font-size:10px;letter-spacing:.12em;text-shadow:0 1px 5px #000}.material-a{left:4%;top:11%;width:42%;height:62%;transform:rotate(-4deg)}.material-b{left:40%;top:24%;width:44%;height:66%;transform:rotate(3deg)}.material-c{left:19%;top:4%;width:34%;height:40%;transform:rotate(2deg);background:#e9e7e1}.material-empty{display:grid;place-items:center;color:#99948c;font-size:12px;letter-spacing:.16em;line-height:1.8}.material-card.is-hover{z-index:5;transform:rotate(0) scale(1.08);filter:contrast(1.04)}.material-card.is-playing{z-index:6}.home-page .cover-foot{z-index:4}@media(max-width:700px){.home-page .home-copy{margin-left:3%;padding-top:2vh}.home-page .home-copy h1{font-size:34px}.home-page .home-sub{font-size:14px}.visual-board{left:4%;right:0;top:42%;transform:none}.material-grid{min-height:390px}.material-a{left:0;width:48%}.material-b{left:38%;width:51%}.material-c{left:18%;width:38%}} .home-page,.about-page,.works-page{background:var(--paper)}.about-page,.works-page{border-top:1px solid var(--line)}.home-page .home-sub{font-family:GenSen,sans-serif;font-weight:400;color:var(--ink);font-size:clamp(22px,2.6vw,36px)}.home-page .enter-link{transition:padding .3s}.home-page .enter-link:hover{padding-left:14px}.work-list{max-width:980px}.work-item{grid-template-columns:48px 1.8fr 1fr 110px;min-height:150px}.work-item h3{font-size:clamp(28px,3.4vw,52px)}.hover-preview{position:relative;display:flex!important;width:min(470px,48%);height:300px;margin:54px 0 0 auto;overflow:hidden;transition:transform .35s,background .35s}.hover-preview.is-video{background:#171716;color:#fff}.preview-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}.hover-preview span,.hover-preview small{position:relative;z-index:1}.hover-preview.is-video span{color:#fff}.hover-preview.is-video small{color:#d0d0cb}.modal-inner{border-top:3px solid var(--ink)} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;filter:grayscale(.25)}.video-shade{position:absolute;inset:0;background:linear-gradient(90deg,#f7f6f2e8 0%,#f7f6f266 48%,#17171622 100%);z-index:1;pointer-events:none}.home-page .home-copy,.home-page .visual-board,.home-page .home-footer{z-index:2}.home-page .home-copy{position:relative}.home-page .home-copy h1{letter-spacing:.03em;font-size:clamp(52px,9vw,130px);line-height:.9} :root{--bg:#f7f6f2;--paper:#fbfaf7;--ink:#171716;--muted:#777570;--line:#d9d7d0;--soft:#ecebe6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 Inter,"Noto Sans SC",sans-serif}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}.site-header{position:fixed;z-index:10;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:#f7f6f2e9;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.site-header a{text-decoration:none;font-size:11px;letter-spacing:.14em}.site-header nav{display:flex;gap:30px}.site-header nav span{margin-left:7px;color:var(--muted)}.menu{display:none;border:0;background:none;font-size:11px}.page{min-height:100vh;padding:150px max(7vw,30px) 170px}.home-page{position:relative;overflow:hidden;background:var(--paper);min-height:100vh}.home-copy{position:relative;z-index:2;margin-left:16%;padding-top:8vh}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--muted)}.home-copy h1{font-size:clamp(80px,14vw,190px);line-height:.8;font-weight:500;letter-spacing:-.13em;margin:46px 0 25px}.home-sub{font:clamp(24px,3vw,42px)/1.4 Georgia,serif;color:var(--muted)}.enter-link{display:inline-block;margin-top:38px;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:7px}.enter-link span{margin-left:28px}.visual-board{position:absolute;top:22%;left:38%;right:8%;height:58vh;min-height:380px}.placeholder{background:linear-gradient(135deg,#efeee9,#e3e1db);border:1px solid #d4d1c9;color:#88847e;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.placeholder span{font-size:13px;letter-spacing:.18em}.placeholder small{font-size:10px;color:#aaa59e;margin-top:10px}.hero-placeholder{position:absolute;left:12%;top:5%;width:58%;height:72%;transform:rotate(-3deg);transition:transform .4s}.hero-placeholder:hover{transform:rotate(0) scale(1.02)}.small-placeholder{position:absolute;width:26%;height:28%;transition:transform .35s}.small-placeholder:hover{transform:translateY(-8px) rotate(2deg)}.small-placeholder.one{right:0;top:0}.small-placeholder.two{right:8%;bottom:0}.board-note{position:absolute;right:0;bottom:-5%;font:italic 28px Georgia,serif;transform:rotate(-8deg)}.home-footer{position:absolute;left:7vw;right:7vw;bottom:30px;padding-top:15px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:.12em}.section-head{display:flex;align-items:baseline;gap:25px;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:90px}.section-head span{font-size:12px;color:var(--muted)}.section-head h2{font-size:clamp(48px,7vw,100px);font-weight:500;letter-spacing:-.1em;line-height:.9;margin:0}.section-head i{margin-left:auto;font-size:11px;color:var(--muted);font-style:normal}.about-page{background:var(--paper)}.about-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:12vw;max-width:1180px;margin:auto}.statement{font:clamp(30px,4.2vw,58px)/1.35 Georgia,serif;max-width:720px;margin:0 0 60px}.about-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:30px}.tab{border:0;background:none;padding:0 0 12px;color:var(--muted);font-size:13px}.tab.active{color:var(--ink);border-bottom:1px solid var(--ink)}.tab-panel{display:none;color:var(--muted);line-height:2}.tab-panel.active{display:block}.about-visual{min-height:470px}.works-page{background:var(--bg)}.works-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:0}.works-toolbar p{margin:0;font-size:12px;color:var(--muted);letter-spacing:.1em}.filter{border:0;background:none;color:var(--muted);font-size:12px;margin-left:20px}.filter.active{color:var(--ink);text-decoration:underline;text-underline-offset:5px}.work-item{position:relative;display:grid;grid-template-columns:55px 1.6fr 1fr 130px;gap:22px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .35s,background .35s}.work-item:hover{padding-left:18px;padding-right:18px;background:var(--soft)}.work-item>span{color:var(--muted);font-size:12px}.work-item small{font-size:10px;color:var(--muted);letter-spacing:.12em}.work-item h3{font-size:clamp(25px,3vw,45px);font-weight:500;letter-spacing:-.06em;line-height:1.15;margin:12px 0 0}.work-item strong{font-size:13px;font-weight:400;color:var(--muted);line-height:1.8}.open-work{border:0;background:none;text-align:right;font-size:11px}.work-placeholder{height:330px;margin-top:80px}.work-modal{position:fixed;inset:0;z-index:20;background:#171716dd;display:grid;place-items:center;padding:30px;opacity:0;pointer-events:none;transition:opacity .3s}.work-modal.open{opacity:1;pointer-events:auto}.modal-inner{width:min(850px,100%);max-height:90vh;overflow:auto;background:var(--paper);padding:55px;position:relative}.close-modal{position:absolute;right:22px;top:15px;border:0;background:none;font-size:28px}.modal-inner h2{font-size:clamp(38px,6vw,75px);font-weight:500;letter-spacing:-.08em;line-height:1;margin:25px 0}.modal-content{color:var(--muted);max-width:680px;line-height:1.9}.modal-media{height:230px;margin-top:35px}@media(max-width:700px){.site-header{height:62px;padding:0 22px}.site-header nav{display:none}.menu{display:block}.page{padding:110px 24px 120px}.home-copy{margin-left:4%;padding-top:15vh}.home-copy h1{font-size:84px}.visual-board{left:7%;right:0;top:49%;transform:scale(.82);transform-origin:top left}.home-footer{font-size:9px;bottom:20px}.section-head{display:block;margin-bottom:65px}.section-head h2{margin:14px 0}.section-head i{display:block}.about-layout{grid-template-columns:1fr;gap:55px}.about-visual{min-height:300px}.works-toolbar{display:block}.works-toolbar>div{margin-top:20px}.filter{margin-left:0;margin-right:20px}.work-item{grid-template-columns:35px 1fr;gap:12px}.work-item strong{grid-column:2}.open-work{grid-column:2;text-align:left;padding:0}.work-placeholder{height:240px}.modal-inner{padding:35px 24px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-placeholder,.small-placeholder,.work-item,.work-modal{transition:none}} /* Works — four-part kinetic archive */ .works-page{min-height:100vh;padding:118px 5vw 52px;background:#f4f1eb;overflow:hidden} .works-motion-head{display:flex;align-items:baseline;gap:24px;border-bottom:1px solid #d7d1c8;padding-bottom:18px;color:#68615a;letter-spacing:.16em;font-size:11px} .works-motion-head span{color:#b8382e}.works-motion-head i{font-style:normal;color:#292723}.works-motion-head small{margin-left:auto;letter-spacing:.1em} .works-motion-intro{position:relative;z-index:2;width:min(460px,40vw);padding-top:9vh}.works-motion-intro h2{margin:21px 0 24px;font-size:clamp(45px,6.5vw,92px);line-height:.98;letter-spacing:-.07em;font-weight:500}.works-motion-intro h2 em{font-style:normal;color:#b8382e}.works-motion-intro>p:not(.eyebrow){max-width:320px;margin:0;color:#6f675e;font-size:13px;line-height:2}.works-hint{display:inline-block;margin-top:34px;font-size:10px;letter-spacing:.2em;color:#8e867c} .works-motion-stage{position:absolute;left:34vw;right:4vw;top:168px;height:calc(100vh - 260px);min-height:490px;--works-mx:0px;--works-my:0px} .works-progress{position:absolute;top:-31px;right:2vw;display:flex;align-items:center;gap:11px;color:#8b837b;font-size:10px;letter-spacing:.15em}.works-progress b{font-weight:400;color:#4c4740}.works-progress span{position:relative;width:110px;height:1px;background:#d2cbc2;overflow:hidden}.works-progress span:after{content:'';position:absolute;left:0;top:0;width:var(--progress,25%);height:1px;background:#b8382e;transition:width .5s ease} .works-part{position:absolute;width:clamp(185px,17vw,265px);height:clamp(285px,47vh,490px);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s;transform:translate3d(var(--works-mx),var(--works-my),0) scale(.82) rotate(var(--part-rotate));opacity:.62;filter:saturate(.72);cursor:pointer}.works-part:nth-of-type(1){left:0;top:16%;--part-rotate:-6deg}.works-part:nth-of-type(2){left:23%;top:3%;--part-rotate:3deg}.works-part:nth-of-type(3){left:48%;top:17%;--part-rotate:-2deg}.works-part:nth-of-type(4){left:72%;top:5%;--part-rotate:6deg}.works-part.is-active{z-index:5;opacity:1;filter:saturate(1);transform:translate3d(var(--works-mx),var(--works-my),0) scale(1) rotate(0deg)} .works-part-card{position:relative;width:100%;height:100%;padding:20px 18px 18px;border:1px solid #d4cdc2;background:#f9f7f1;color:#332f2a;text-align:left;box-shadow:0 25px 48px #41372b1c;overflow:hidden;transition:box-shadow .5s,background .5s}.works-part.is-active .works-part-card{box-shadow:0 32px 70px #41372b32;background:#fffdf9}.works-part-card:after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,transparent 45%,var(--part-accent) 180%);opacity:.1;pointer-events:none}.works-part-no{position:absolute;right:17px;top:17px;font-size:11px;color:var(--part-accent);letter-spacing:.16em}.works-part-eyebrow{display:block;position:relative;z-index:1;width:72%;font-size:9px;line-height:1.4;letter-spacing:.16em;color:#81786e}.works-part-visual{display:block;position:absolute;left:12%;right:12%;top:18%;height:49%;overflow:hidden;background:#ebe5da}.works-part-visual img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.72) contrast(.94);transition:transform .8s ease,filter .6s}.works-part.is-active .works-part-visual img{transform:scale(1.08);filter:saturate(.94) contrast(1)}.works-part-title{position:absolute;left:18px;bottom:59px;font-size:clamp(22px,2.6vw,38px);letter-spacing:-.08em;line-height:1}.works-part-en{position:absolute;left:19px;bottom:29px;font-size:9px;letter-spacing:.16em;color:#8b8176}.works-part-arrow{position:absolute;right:18px;bottom:25px;font-size:24px;color:var(--part-accent)} .works-part-detail{position:absolute;left:calc(100% + 20px);top:27%;width:185px;opacity:0;transform:translateX(-14px);pointer-events:none;transition:opacity .45s,transform .55s}.works-part.is-active .works-part-detail{opacity:1;transform:translateX(0);pointer-events:auto}.works-part-detail p{margin:0 0 15px;font-size:12px;line-height:1.8;color:#635b53}.works-part-detail small{display:block;color:#91877d;font-size:9px;letter-spacing:.08em;line-height:1.6}.works-open-detail{margin-top:20px;border:0;border-bottom:1px solid var(--part-accent);padding:0 0 5px;background:none;color:var(--part-accent);font-size:10px;letter-spacing:.14em}.works-open-detail span{margin-left:13px;font-size:17px}.works-motion-footer{position:absolute;left:5vw;right:5vw;bottom:28px;border-top:1px solid #d7d1c8;padding-top:12px;display:flex;justify-content:space-between;color:#8c8379;font-size:9px;letter-spacing:.15em}.works-current{color:#b8382e} @media(max-width:900px){.works-page{padding:105px 24px 100px}.works-motion-intro{width:100%;padding-top:7vh}.works-motion-intro h2{font-size:58px}.works-motion-stage{position:relative;left:auto;right:auto;top:auto;height:420px;min-height:0;margin-top:32px}.works-part{width:180px;height:295px}.works-part:nth-of-type(1){left:0;top:18%}.works-part:nth-of-type(2){left:21%;top:0}.works-part:nth-of-type(3){left:43%;top:18%}.works-part:nth-of-type(4){left:65%;top:0}.works-part-detail{display:none}.works-motion-footer{position:relative;left:auto;right:auto;bottom:auto;margin-top:34px}} @media(max-width:620px){.works-motion-stage{height:365px}.works-part{width:145px;height:245px;padding:14px 12px}.works-part:nth-of-type(1){left:-3%}.works-part:nth-of-type(2){left:18%}.works-part:nth-of-type(3){left:40%}.works-part:nth-of-type(4){left:62%}.works-part-title{left:12px;bottom:48px;font-size:24px}.works-part-en{left:13px;bottom:21px;font-size:7px}.works-part-arrow{right:11px;bottom:17px}.works-part-visual{left:10%;right:10%;top:19%;height:46%}.works-motion-intro h2{font-size:49px}.works-motion-head small{display:none}} /* Works rotating cards — scoped to #works only. */ #works.works-page{position:relative;min-height:100vh;overflow:hidden;padding:116px 5vw 46px;background:var(--paper)} .works-rotating-header{position:relative;z-index:3;display:flex;align-items:baseline;gap:22px;border-bottom:1px solid var(--line);padding-bottom:16px;color:var(--muted);font-size:11px;letter-spacing:.16em} .works-rotating-header span{color:var(--ink)}.works-rotating-header strong{font-weight:500;color:var(--ink)}.works-rotating-header small{margin-left:auto;font-size:10px;letter-spacing:.1em} .works-rotating-intro{position:relative;z-index:3;width:260px;padding-top:8vh}.works-rotating-intro>span{font-size:10px;letter-spacing:.2em;color:var(--muted)} .works-rotating-intro h2{margin:22px 0 20px;font-size:clamp(54px,7vw,100px);font-weight:500;letter-spacing:-.1em;line-height:.86}.works-rotating-intro h2 em{font-style:normal;color:#b8382e}.works-rotating-intro p{max-width:190px;color:var(--muted);font-size:12px;line-height:1.9} .works-rotating-stage{position:absolute;inset:150px 4vw 86px 28vw;min-height:440px;--stage-x:0px;--stage-y:0px;perspective:1400px} .works-orbit{position:absolute;left:50%;top:50%;width:min(40vw,540px);height:min(40vw,540px);border:1px solid #d9d2ca;border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg);opacity:.65} .works-orbit:before,.works-orbit:after{content:"";position:absolute;inset:11%;border:1px dashed #e3ddd5;border-radius:50%}.works-orbit:after{inset:30%;border-style:solid;opacity:.6} .works-center-copy{position:absolute;z-index:1;left:50%;top:50%;width:180px;height:180px;display:grid;place-content:center;text-align:center;border:1px solid #d8d0c6;border-radius:50%;background:#fbfaf7e8;transform:translate(-50%,-50%);box-shadow:0 16px 40px #4c44351a} .works-center-copy span{font-size:8px;letter-spacing:.2em;color:#8d8379}.works-center-copy strong{margin:9px 0 4px;font-size:24px;font-weight:500;letter-spacing:.08em}.works-center-copy small{font-size:8px;letter-spacing:.16em;color:#b8382e} .works-rotating-card{position:absolute;z-index:2;width:clamp(170px,17vw,245px);height:clamp(245px,37vh,360px);transform:translate3d(var(--stage-x),var(--stage-y),0) rotate(var(--card-angle)) translate(var(--card-x),var(--card-y));transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .45s,opacity .45s;animation:worksCardFloat 6s ease-in-out infinite;animation-delay:var(--float-delay)} .works-rotating-card.card-1{left:11%;top:7%;--card-x:-28%;--card-y:-3%;--card-angle:-8deg;--float-delay:-.2s}.works-rotating-card.card-2{left:48%;top:1%;--card-x:-50%;--card-y:-7%;--card-angle:5deg;--float-delay:-1.7s}.works-rotating-card.card-3{left:74%;top:35%;--card-x:-50%;--card-y:-50%;--card-angle:9deg;--float-delay:-3.5s}.works-rotating-card.card-4{left:29%;top:73%;--card-x:-50%;--card-y:-50%;--card-angle:-5deg;--float-delay:-4.6s} .works-rotating-card:hover{z-index:10;filter:drop-shadow(0 20px 25px #40372b28);transform:translate3d(var(--stage-x),var(--stage-y),0) rotate(calc(var(--card-angle) * -1)) translate(var(--card-x),var(--card-y)) scale(1.06)} .works-card-hit{width:100%;height:100%;padding:0;border:0;background:none;text-align:left;perspective:1200px}.works-card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,.8,.22,1)}.works-rotating-card.is-flipped .works-card-inner{transform:rotateY(180deg)} .works-card-face{position:absolute;inset:0;display:block;backface-visibility:hidden;overflow:hidden;border:1px solid #d8d0c7;background:#faf7f0;color:#2e2925;box-shadow:0 16px 40px #433a301c}.works-card-back{transform:rotateY(180deg);padding:25px 22px;background:var(--card-tone);color:#fbfaf7;display:flex;flex-direction:column;justify-content:flex-end}.works-card-back strong{font-size:clamp(25px,3vw,42px);font-weight:500;letter-spacing:-.07em}.works-card-back p{font-size:11px;line-height:1.8;margin:15px 0 28px;color:#fffaf5dc}.works-card-back>span{font-size:9px;letter-spacing:.13em;opacity:.72}.works-card-back i{margin-top:18px;font-size:9px;letter-spacing:.16em;font-style:normal} .works-card-no{position:absolute;z-index:2;right:16px;top:13px;font-size:10px;letter-spacing:.15em;color:var(--card-tone)}.works-card-image{position:absolute;inset:0 0 28%;display:block;overflow:hidden;background:#ede8df}.works-card-image:after{content:"";position:absolute;inset:0;background:#faf7f04d;mix-blend-mode:screen}.works-card-image img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.72) contrast(.94);transition:transform .8s ease}.works-rotating-card:hover .works-card-image img{transform:scale(1.09) rotate(2deg);filter:saturate(.92) contrast(1)}.works-card-title{position:absolute;left:17px;bottom:41px;font-size:clamp(20px,2.5vw,34px);line-height:1;letter-spacing:-.08em}.works-card-en{position:absolute;left:18px;bottom:17px;font-size:8px;letter-spacing:.13em;color:#8d8277}.works-card-view{position:absolute;right:15px;bottom:16px;font-size:9px;letter-spacing:.12em;color:var(--card-tone)} @keyframes worksCardFloat{0%,100%{margin-top:0}50%{margin-top:-8px}} .works-rotating-footer{position:absolute;z-index:3;left:5vw;right:5vw;bottom:24px;border-top:1px solid var(--line);padding-top:11px;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:.14em}.works-rotating-footer span:last-child{color:#b8382e} @media(max-width:800px){#works.works-page{padding:100px 24px 80px}.works-rotating-header small{display:none}.works-rotating-intro{padding-top:7vh;width:200px}.works-rotating-intro h2{font-size:54px}.works-rotating-stage{inset:250px 12px 90px;height:390px;min-height:0}.works-orbit{width:350px;height:350px}.works-center-copy{width:120px;height:120px}.works-center-copy strong{font-size:18px}.works-rotating-card{width:148px;height:220px}.works-rotating-card.card-1{left:18%;top:2%}.works-rotating-card.card-2{left:52%;top:1%}.works-rotating-card.card-3{left:70%;top:47%}.works-rotating-card.card-4{left:25%;top:62%}.works-card-back{padding:17px 14px}.works-card-back strong{font-size:24px}.works-card-back p{font-size:10px;margin:10px 0 16px}.works-rotating-footer{bottom:17px}} /* About Me — portrait and archival accents */ .about-page,.about-page *{font-family:GenSen,sans-serif!important} .about-profile-layout{gap:6vw;overflow:visible} .about-intro-copy h1{margin:24px 0 18px;line-height:1.02} .about-school{margin-bottom:12px;line-height:1.5} .about-values{margin-bottom:24px;line-height:1.5} .about-manifesto{padding:14px 20px;margin-bottom:20px;line-height:1.55} .about-manifesto p+p{margin-top:1px} .about-tags{gap:8px;margin-bottom:22px} .about-tags span{padding:6px 13px} .about-profile-visual{isolation:isolate} .about-photo-placeholder{position:relative;overflow:visible!important;background:#e8e2d8!important;border:0!important} .about-profile-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 34%;border-radius:15px;filter:saturate(.84) contrast(.96)} .about-frame-deco{position:absolute;inset:-23px;width:calc(100% + 46px);height:calc(100% + 46px);object-fit:fill;opacity:.68;mix-blend-mode:multiply;pointer-events:none;z-index:2} .about-pearl-deco{position:absolute;right:-83px;bottom:-60px;width:205px;opacity:.64;mix-blend-mode:multiply;transform:rotate(-9deg);pointer-events:none;z-index:3} .about-deco{position:absolute;pointer-events:none;z-index:-1;mix-blend-mode:multiply;opacity:.34;filter:saturate(.75)} .about-deco-paper{width:270px;height:350px;object-fit:cover;left:-170px;top:-66px;transform:rotate(-8deg)} .about-deco-bow{width:190px;height:130px;object-fit:contain;right:-150px;top:30px;transform:rotate(8deg);opacity:.27} .about-name{position:relative;z-index:4;margin-top:17px!important;line-height:1.4} @media(max-width:700px){ .about-profile-layout{overflow:visible} .about-frame-deco{inset:-15px;width:calc(100% + 30px);height:calc(100% + 30px)} .about-pearl-deco{right:-48px;bottom:-35px;width:145px} .about-deco-paper{left:-75px;top:-28px;width:180px;height:240px} .about-deco-bow{right:-52px;top:-8px;width:135px} } /* AND2ES-inspired home archive */ .home-page{min-height:1220px!important;background:var(--paper)!important;color:var(--ink)!important;overflow:hidden} .home-page .home-copy{position:absolute!important;left:5vw;top:118px;margin:0!important;padding:0!important;z-index:7;max-width:300px;pointer-events:none} .home-page .home-copy .eyebrow{font-size:9px;letter-spacing:.22em;color:#6e6961} .home-page .home-copy h1{margin:18px 0 14px!important;font-size:clamp(38px,5vw,74px)!important;line-height:.84!important;letter-spacing:-.055em!important;font-weight:500} .home-page .home-sub{margin:0!important;max-width:230px!important;font-size:13px!important;line-height:1.7!important;color:#716c64!important} .home-page .enter-link{display:none} .home-page .visual-board{position:absolute!important;inset:72px 0 54px!important;width:auto!important;height:auto!important;min-height:1090px!important;transform:none!important;z-index:3} .archive-stage{position:relative;width:100%;height:100%;min-height:1090px;isolation:isolate} .archive-stage:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#776f6312 1px,transparent 1px),linear-gradient(90deg,#776f6312 1px,transparent 1px);background-size:8.333vw 100%,100% 150px;pointer-events:none} .archive-word{position:absolute;z-index:-1;color:#dedbd2;font-size:clamp(80px,15.5vw,230px);font-weight:500;line-height:.72;letter-spacing:-.09em;white-space:nowrap;user-select:none} .archive-word-top{top:130px;left:27%} .archive-word-bottom{bottom:112px;left:-2%;font-size:clamp(55px,10vw,150px)} .archive-card{--mx:0px;--my:0px;position:absolute;border:0;padding:0;background:#e6e0d3;box-shadow:0 14px 40px #382e2117;overflow:hidden;cursor:zoom-in;transform:translate(var(--mx),var(--my)) rotate(var(--r,0deg));transition:transform .48s cubic-bezier(.2,.75,.25,1),filter .4s,opacity .35s,box-shadow .4s;will-change:transform;z-index:calc(2 + var(--order))} .archive-card img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(.95);transition:transform .65s cubic-bezier(.2,.75,.25,1),filter .45s} .archive-card span{position:absolute;left:9px;bottom:7px;padding:2px 6px;background:#f8f5edcc;color:#4d473f;font-size:8px;letter-spacing:.13em;opacity:0;transition:opacity .25s} .archive-card:hover{z-index:40;transform:translate(var(--mx),calc(var(--my) - 13px)) rotate(0deg) scale(1.035);box-shadow:0 24px 55px #382e2130} .archive-card:hover img{transform:scale(1.025);filter:saturate(.9) contrast(1)} .archive-card:hover span{opacity:1} .archive-card-1{left:36%;top:9%;width:20%;height:29%;--r:-3deg} .archive-card-2{left:56%;top:5%;width:14%;height:28%;--r:2.5deg} .archive-card-3{left:72%;top:12%;width:17%;height:25%;--r:-2deg} .archive-card-4{left:13%;top:27%;width:16%;height:31%;--r:2deg} .archive-card-5{left:29%;top:36%;width:22%;height:14%;--r:-1.5deg} .archive-card-6{left:48%;top:31%;width:17%;height:33%;--r:2deg} .archive-card-7{left:65%;top:38%;width:20%;height:29%;--r:-2.5deg} .archive-card-8{left:84%;top:31%;width:13%;height:18%;--r:3deg} .archive-card-9{left:4%;top:58%;width:19%;height:20%;--r:-2deg} .archive-card-10{left:24%;top:61%;width:14%;height:27%;--r:2deg} .archive-card-11{left:39%;top:66%;width:15%;height:27%;--r:-1deg} .archive-card-12{left:55%;top:66%;width:13%;height:26%;--r:2.5deg} .archive-card-13{left:70%;top:69%;width:12%;height:26%;--r:-2deg} .archive-card-14{left:83%;top:54%;width:14%;height:26%;--r:1.5deg} .archive-card-15{left:8%;top:10%;width:12%;height:25%;--r:-2deg} .archive-card-16{left:21%;top:6%;width:12%;height:24%;--r:2deg} .archive-card-17{left:2%;top:35%;width:10%;height:26%;--r:-1deg} .archive-card-18{left:86%;top:74%;width:11%;height:22%;--r:2deg} .archive-card-19{left:72%;top:45%;width:10%;height:24%;--r:-2.5deg} .archive-hint{position:absolute;right:4vw;top:154px;margin:0;writing-mode:vertical-rl;font-size:8px;letter-spacing:.25em;color:#7b756d} .visual-board.has-focus:after{content:'';position:fixed;inset:0;background:#27231e80;backdrop-filter:blur(3px);z-index:80} .visual-board.has-focus .archive-card:not(.is-focused){opacity:.25;filter:blur(2px)} .archive-card.is-focused{position:fixed;left:50%!important;top:50%!important;width:min(520px,72vw)!important;height:min(720px,76vh)!important;transform:translate(-50%,-50%) rotate(0deg)!important;z-index:90;cursor:zoom-out;box-shadow:0 35px 100px #17130e66} .archive-card.is-focused img{object-fit:contain;background:#eee8dc;filter:none} .home-page .home-footer{z-index:7;background:var(--paper);bottom:0;padding:17px 7vw 18px;left:0;right:0} @media(max-width:700px){.home-page{min-height:1130px!important}.home-page .home-copy{left:24px;top:94px}.home-page .home-copy h1{font-size:43px!important}.home-page .visual-board{inset:62px 0 54px!important;min-height:1010px!important}.archive-stage{min-height:1010px}.archive-word-top{top:190px;left:4%}.archive-card{min-width:84px}.archive-card-1{left:36%;top:9%;width:28%;height:23%}.archive-card-2{left:67%;top:13%;width:27%;height:22%}.archive-card-3{left:5%;top:29%;width:30%;height:23%}.archive-card-4{left:38%;top:34%;width:25%;height:25%}.archive-card-5{left:65%;top:38%;width:31%;height:15%}.archive-card-6{left:7%;top:57%;width:27%;height:26%}.archive-card-7{left:37%;top:62%;width:30%;height:23%}.archive-card-8{left:69%;top:57%;width:25%;height:17%}.archive-card-9{left:13%;top:84%;width:30%;height:13%}.archive-card-10{left:54%;top:79%;width:28%;height:20%}.archive-card:nth-of-type(n+11){display:none}.archive-hint{display:none}.archive-card.is-focused{display:block!important;width:82vw!important;height:70vh!important}.home-page .home-footer{padding-left:24px;padding-right:24px}} @media(prefers-reduced-motion:reduce){.archive-card,.archive-card img{transition:none}.archive-card:hover{transform:rotate(0deg)}} /* Project carousel homepage — inspired by AND2ES project pages */ .home-page{min-height:100vh!important;height:100vh!important;padding:0!important;background:var(--paper)!important} .home-page .home-copy{left:4.8vw!important;top:112px!important;z-index:8;mix-blend-mode:multiply} .home-page .home-copy h1{font-size:clamp(34px,4.4vw,66px)!important;letter-spacing:-.065em!important;line-height:.84!important;margin-top:15px!important} .home-page .home-copy .home-sub{font-size:11px!important;letter-spacing:.08em;color:#4e4942!important} .home-page .visual-board{position:absolute!important;inset:72px 0 0!important;min-height:0!important;height:calc(100vh - 72px)!important;z-index:3} .project-stage{--px:0px;--py:0px;position:relative;width:100%;height:100%;overflow:hidden;background:var(--paper);isolation:isolate} .project-stage:before{content:'';position:absolute;left:0;right:0;bottom:94px;border-top:1px solid #bcb7ad;z-index:7} .project-track{position:absolute;inset:0 0 95px;overflow:hidden} .project-slide{position:absolute;inset:0;margin:0;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateX(7%) scale(.94);transition:opacity .6s ease,transform .85s cubic-bezier(.18,.75,.24,1),visibility .6s;overflow:hidden} .project-slide:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#faf8f1aa 0%,transparent 32%,transparent 78%,#faf8f155 100%);pointer-events:none} .project-slide img{width:76%;height:82%;object-fit:contain;transform:translate(var(--px),var(--py)) scale(1.02);filter:saturate(.76) contrast(.96);transition:transform .9s cubic-bezier(.18,.75,.24,1),filter .5s} .project-slide.is-active{opacity:1;visibility:visible;transform:translateX(0) scale(1);z-index:2} .project-slide.is-active img{filter:saturate(.88) contrast(.98)} .project-index{position:absolute;right:4.5vw;top:34px;z-index:8;display:flex;gap:6px;font-size:10px;letter-spacing:.15em;color:#4e4942} .project-index i{font-style:normal;color:#9a948b} .project-meta{position:absolute;z-index:8;left:4.8vw;right:32%;bottom:32px;display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;align-items:center;gap:24px;font-size:10px;letter-spacing:.08em;color:#57524b} .project-meta p{margin:0;white-space:nowrap} .project-meta .project-name{font-size:13px;color:#171716;letter-spacing:.02em} .project-controls{position:absolute;right:4.5vw;bottom:24px;z-index:9;display:flex;align-items:center;gap:24px} .project-controls button{border:0;background:none;padding:6px 0;font-size:10px;letter-spacing:.1em;color:#312e29;transition:opacity .25s,transform .25s} .project-controls button:hover{opacity:.5;transform:translateY(-2px)} .project-expand{border-bottom:1px solid #302c27!important} .project-stage.is-expanded{position:fixed;inset:0;width:100vw;height:100vh;z-index:100;background:#1d1c19} .project-stage.is-expanded .project-track{inset:0} .project-stage.is-expanded .project-slide img{width:92%;height:92%;filter:none;background:#1d1c19;object-fit:contain} .project-stage.is-expanded .project-slide:after,.project-stage.is-expanded:before,.project-stage.is-expanded .project-meta{display:none} .project-stage.is-expanded .project-index{color:#f5f1e7} .project-stage.is-expanded .project-controls{bottom:26px} .project-stage.is-expanded .project-controls button{color:#f5f1e7} .project-stage.is-expanded .project-expand{border-color:#f5f1e7!important} .home-page .home-footer{display:none!important} @media(max-width:700px){.home-page{height:100svh!important;min-height:100svh!important}.home-page .home-copy{left:22px!important;top:90px!important}.home-page .home-copy h1{font-size:38px!important}.home-page .home-copy .home-sub{display:none}.home-page .visual-board{inset:62px 0 0!important;height:calc(100svh - 62px)!important}.project-track{inset:95px 0 120px}.project-slide img{width:94%;height:88%}.project-slide:after{background:linear-gradient(180deg,#faf8f155,transparent 35%)}.project-index{right:22px;top:24px}.project-stage:before{bottom:119px}.project-meta{left:22px;right:22px;bottom:66px;grid-template-columns:1fr 1fr;gap:7px 20px;font-size:8px}.project-meta p:nth-child(3),.project-meta p:nth-child(4){color:#8b857c}.project-controls{right:22px;bottom:20px;gap:20px}.project-stage.is-expanded .project-slide img{width:96%;height:88%}.project-stage.is-expanded .project-controls{bottom:18px}} @media(prefers-reduced-motion:reduce){.project-slide,.project-slide img{transition:none}} /* Kinetic image field based on the supplied motion reference */ .home-page .home-copy{z-index:12!important;pointer-events:none;mix-blend-mode:multiply} .home-page .home-copy h1{font-size:clamp(34px,4.1vw,62px)!important;opacity:.9} .home-page .visual-board{cursor:none!important;overflow:hidden} .kinetic-stage{position:absolute;inset:0;overflow:hidden;background:var(--paper);isolation:isolate;cursor:none} .kinetic-stage:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle 280px at var(--cursor-x,50%) var(--cursor-y,50%),transparent,#fbfaf71a 55%,#fbfaf754)} .kinetic-label{position:absolute;right:4.5vw;top:35px;z-index:8;font-size:8px;letter-spacing:.22em;color:#777169;writing-mode:vertical-rl} .kinetic-counter{position:absolute;right:4.5vw;bottom:30px;z-index:8;font-size:9px;letter-spacing:.18em;color:#625d55} .tag-invite{margin:8px 0 0;font-size:10px;line-height:1.55;letter-spacing:.06em;color:#777169;opacity:0;animation:tag-invite-in .9s .25s ease forwards} .kinetic-about{position:absolute;left:50%;top:52%;z-index:28;transform:translate(-50%,-46%);font-size:clamp(11px,1vw,14px);font-weight:500;letter-spacing:.28em;color:#B8382E;text-decoration:none;opacity:0;pointer-events:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)} .kinetic-stage.about-revealed .kinetic-about{opacity:1;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer} @keyframes tag-invite-in{to{opacity:1}} .kinetic-card{position:absolute;left:0;top:0;z-index:2;border:0;padding:0;background:#eee8dc;box-shadow:0 16px 45px #3a302016;overflow:hidden;opacity:.32;filter:grayscale(.18);transform-origin:center;transition:opacity .42s,filter .42s,box-shadow .42s;will-change:transform;touch-action:none;cursor:none} .kinetic-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .42s} .kinetic-card span{position:absolute;left:8px;bottom:7px;padding:2px 5px;background:#f7f3e9d9;color:#4a443d;font-size:7px;letter-spacing:.16em;opacity:0;transition:opacity .25s} .kinetic-card.is-near,.kinetic-card:hover{z-index:20;opacity:1;filter:none;box-shadow:0 25px 70px #2e251d32} .kinetic-card.is-near img,.kinetic-card:hover img{transform:scale(1.025)} .kinetic-card.is-near span,.kinetic-card:hover span{opacity:1} .kinetic-card.is-dragging{z-index:35;opacity:1;filter:none;box-shadow:0 34px 90px #2e251d3d} .kinetic-cursor{position:fixed;left:0;top:0;z-index:50;width:78px;height:78px;border:1px solid #4d484133;border-radius:50%;display:grid;place-items:center;color:#37332e;background:#f8f5ed66;backdrop-filter:blur(7px);pointer-events:none;opacity:0;transition:opacity .3s,width .35s,height .35s;will-change:transform} .kinetic-cursor:before,.kinetic-cursor:after{content:'';position:absolute;border:1px solid #5b554d22;border-radius:50%;inset:7px;animation:cursor-pulse 2.8s ease-in-out infinite} .kinetic-cursor:after{inset:16px;animation-delay:-1.1s} .kinetic-cursor span{font-size:8px;letter-spacing:.18em} .kinetic-stage.has-pointer .kinetic-cursor{opacity:1} .kinetic-stage:has(.kinetic-card.is-near) .kinetic-cursor{width:104px;height:104px} .kinetic-stage.has-focus:before{content:'';position:fixed;inset:0;background:#1d1b18a3;backdrop-filter:blur(5px);z-index:70} .kinetic-stage.has-focus .kinetic-card:not(.is-focused){opacity:.08!important;filter:blur(3px)} .kinetic-card.is-focused{position:fixed!important;left:50%!important;top:50%!important;width:min(570px,72vw)!important;height:min(760px,78vh)!important;transform:translate(-50%,-50%) rotate(0)!important;z-index:80!important;opacity:1!important;filter:none!important;box-shadow:0 40px 120px #17130e66;cursor:zoom-out} .kinetic-card.is-focused img{object-fit:contain;background:#eee8dc;filter:none} @keyframes cursor-pulse{0%,100%{transform:scale(.9);opacity:.25}50%{transform:scale(1.18);opacity:.8}} @media(max-width:700px){.home-page .home-copy{top:86px!important}.home-page .home-copy h1{font-size:35px!important}.kinetic-label{display:none}.kinetic-card{opacity:.55;transform:scale(.65);transform-origin:top left}.kinetic-card:nth-of-type(n+11){display:none}.kinetic-cursor{display:none}.kinetic-stage{cursor:auto}.kinetic-card{cursor:pointer}.kinetic-card.is-focused{display:block!important;width:82vw!important;height:70vh!important}.kinetic-counter{right:22px;bottom:22px}} @media(prefers-reduced-motion:reduce){.kinetic-card{transition:none}.kinetic-cursor:before,.kinetic-cursor:after{animation:none}} /* Dense translucent editorial collage */ .kinetic-card{opacity:.30} .kinetic-card.is-photo{opacity:.34;box-shadow:0 25px 70px #2d261d20} .kinetic-card.is-photo img{object-fit:cover;filter:saturate(.72) contrast(.94)} .kinetic-card.is-paper{background:#f2ede2;padding:7px} .kinetic-card.is-paper img{object-fit:contain;background:#eee8dc;filter:saturate(.72) contrast(.94)} .kinetic-card.is-photo:hover img,.kinetic-card.is-photo.is-near img, .kinetic-card.is-paper:hover img,.kinetic-card.is-paper.is-near img{filter:none} @media(max-width:700px){.kinetic-card.is-photo{transform-origin:center}.kinetic-card.is-paper{padding:4px}} /* Card flip backs */ .kinetic-card>.kinetic-card-inner{position:absolute;inset:0!important;left:0!important;bottom:0!important;width:100%;height:100%;padding:0!important;background:transparent!important;display:block;opacity:1!important;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.72,.2,1);pointer-events:none} .kinetic-card-front,.kinetic-card-back{position:absolute!important;inset:0!important;left:0!important;bottom:0!important;padding:0!important;display:flex!important;width:100%;height:100%;opacity:1!important;backface-visibility:hidden;-webkit-backface-visibility:hidden} .kinetic-card-front{z-index:2;transform:rotateY(0deg);background:#eee8dc} .kinetic-card-back{z-index:1;transform:rotateY(180deg);background:#eee8dc!important;color:#37332e!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px!important;text-align:center;overflow:hidden} .kinetic-card-back:before{content:'';position:absolute;inset:0;background-image:var(--card-image);background-position:center;background-size:cover;filter:none;opacity:1} .kinetic-card-back strong{position:relative;z-index:1;display:block;max-width:100%;padding:5px 8px;background:#f7f3e9d9;font-size:clamp(12px,1.05vw,16px);font-weight:600;line-height:1.35;letter-spacing:.03em;white-space:normal;overflow-wrap:anywhere} .kinetic-card-back small{position:absolute;z-index:1;bottom:10px;font-size:6px;letter-spacing:.18em;color:#4f4942} .kinetic-number{position:absolute!important;left:8px!important;bottom:7px!important;inset:auto auto 7px 8px!important;width:auto!important;height:auto!important;padding:2px 5px!important;background:#f7f3e9d9!important;color:#4a443d!important;font-size:7px!important;letter-spacing:.16em!important;opacity:0!important;transition:opacity .25s!important} .kinetic-card:hover .kinetic-number,.kinetic-card.is-near .kinetic-number{opacity:1!important} .kinetic-card.is-flipped,.kinetic-card.is-flipped:hover{z-index:30!important;opacity:1!important;filter:none!important;box-shadow:0 16px 45px #3a302016!important} .kinetic-card.is-photo.is-flipped,.kinetic-card.is-photo.is-flipped:hover{opacity:1!important} .kinetic-card.is-flipped>.kinetic-card-inner{transform:rotateY(180deg)} .kinetic-card.is-flipped img{transform:none!important} @media(max-width:700px){.kinetic-card-back{padding:12px!important;gap:5px}.kinetic-card-back strong{font-size:11px}.kinetic-card-back small{font-size:5px}} /* About me motion layout */ .about-page{padding-top:120px!important;background:var(--paper);overflow:hidden} .about-motion-head{display:flex;align-items:baseline;gap:22px;border-bottom:1px solid var(--line);padding-bottom:18px;color:var(--muted);letter-spacing:.16em;font-size:11px} .about-motion-head span{color:var(--ink);font-size:12px}.about-motion-head i{font-style:normal;color:#B8382E;letter-spacing:.26em}.about-motion-head small{margin-left:auto;letter-spacing:.08em} .about-motion-layout{position:relative;display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);gap:8vw;max-width:1120px;min-height:650px;margin:52px auto 0;align-items:center} .about-profile-visual{position:relative;transform:translate3d(var(--about-x,0),var(--about-y,0),0) rotate(var(--about-tilt,0deg));transition:transform .65s cubic-bezier(.2,.7,.2,1);z-index:2} .about-photo-placeholder{height:460px;background:linear-gradient(145deg,#ebe7dd,#f7f4ed 52%,#d8d1c4);border:1px solid #d5cec1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#777066;box-shadow:0 25px 70px #3a302016} .about-photo-placeholder span{font-size:13px;letter-spacing:.22em;text-align:center}.about-photo-placeholder small{margin-top:12px;font-size:10px;letter-spacing:.08em;color:#9d978c}.about-name{margin:15px 0 0;font-size:22px;letter-spacing:.18em;color:#B8382E} .about-motion-cards{position:relative;height:510px;perspective:900px} .about-motion-card{position:absolute;width:245px;height:175px;padding:24px;background:#eee8dc;border:1px solid #d7cfc1;box-shadow:0 20px 55px #3a302018;display:flex;flex-direction:column;justify-content:space-between;transform:translate3d(var(--about-x,0),var(--about-y,0),0) rotate(calc(var(--card-rotate) + var(--about-tilt,0deg)));transition:transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .35s;animation:about-card-float 6s ease-in-out infinite} .about-motion-card:hover,.about-motion-card.is-active{z-index:4;background:#f7f3e9;box-shadow:0 28px 75px #3a30203a;transform:translate3d(var(--about-x,0),calc(var(--about-y,0) - 15px),0) rotate(0deg) scale(1.06)} .about-motion-card span{font-size:10px;color:#B8382E;letter-spacing:.18em}.about-motion-card strong{font-size:25px;font-weight:500;letter-spacing:.04em;color:#3d3831}.about-motion-card small{font-size:9px;letter-spacing:.18em;color:#80796e} .card-a{left:0;top:45px;--card-rotate:-5deg;animation-delay:-1s}.card-b{right:8px;top:170px;--card-rotate:4deg;animation-delay:-3s}.card-c{left:92px;bottom:20px;--card-rotate:-2deg;animation-delay:-5s} @keyframes about-card-float{0%,100%{margin-top:0}50%{margin-top:-9px}} @media(max-width:700px){.about-page{padding:95px 24px 100px!important}.about-motion-head{gap:12px}.about-motion-layout{display:block;min-height:900px;margin-top:32px}.about-photo-placeholder{height:360px}.about-motion-cards{height:500px;margin-top:42px}.about-motion-card{width:190px;height:140px;padding:17px}.about-motion-card strong{font-size:19px}.card-a{left:0;top:20px}.card-b{right:0;top:145px}.card-c{left:48px;bottom:5px}} /* About profile arrangement inspired by the supplied reference */ .about-profile-layout{grid-template-columns:1fr 1fr;gap:7vw;max-width:1080px;min-height:620px;align-items:center} .about-intro-copy{position:relative;z-index:3;padding:10px 0 30px} .about-hello{display:inline-block;padding:7px 18px;border-radius:30px;background:#f3eee5;color:#706960;font-size:10px;letter-spacing:.18em} .about-intro-copy h1{margin:32px 0 22px;font-size:clamp(44px,5.7vw,82px);line-height:.98;letter-spacing:-.07em;font-weight:500;color:#2e2b27} .about-school{margin:0 0 16px;color:#B8382E;font-size:14px;letter-spacing:.05em} .about-values{margin:0 0 34px;font-size:13px;letter-spacing:.12em;color:#514b43}.about-values b{color:#B8382E;font-weight:400;margin:0 7px} .about-manifesto{padding:18px 24px;margin-bottom:25px;background:#f7f4eddd;border:1px solid #ece7dd;border-radius:12px;color:#655e55;font-size:14px;line-height:1.8;box-shadow:0 10px 35px #3a30200c} .about-manifesto p{margin:0}.about-manifesto p+p{margin-top:3px} .about-tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}.about-tags span{padding:7px 14px;border:1px solid #d7d0c5;border-radius:30px;color:#625b53;font-size:11px;background:#fbfaf7cc} .about-actions{display:flex;flex-wrap:wrap;gap:14px}.about-action{display:inline-block;padding:12px 25px;border:1px solid #33302b;border-radius:30px;text-decoration:none;font-size:12px;letter-spacing:.08em;transition:transform .3s,background .3s,color .3s}.about-action:hover{transform:translateY(-4px)}.about-action.primary{background:#2f2d29;color:#fff}.about-action.about-works-action{border-color:#B8382E;background:transparent;color:#B8382E}.about-action.about-works-action:hover{background:#B8382E;color:#fff} .about-contact-wrap{position:relative;display:flex}.about-contact-toggle{background:transparent;white-space:nowrap}.about-contact-card{position:absolute;left:0;top:calc(100% + 12px);z-index:20;width:270px;padding:16px 18px;border:1px solid #d7cfc3;border-radius:12px;background:#fbf8f2f5;box-shadow:0 18px 44px #44352720;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility .25s;backdrop-filter:blur(12px)} .about-contact-wrap.is-open .about-contact-card{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .about-contact-card a,.about-contact-card>div{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:8px 0;color:#554d45;text-decoration:none} .about-contact-card a+a{border-top:1px solid #e6ddd2} .about-contact-card small{color:#B8382E;font-size:9px;letter-spacing:.12em}.about-contact-card span{font-size:11px;letter-spacing:.03em;word-break:break-all} @media(max-width:700px){ .about-actions{flex-wrap:nowrap;gap:7px} .about-action{padding:10px 13px;font-size:10px} .about-contact-card{top:auto;bottom:calc(100% + 12px);left:50%;width:min(270px,calc(100vw - 48px));transform:translate(-50%,7px)} .about-contact-wrap.is-open .about-contact-card{transform:translate(-50%,0)} } .about-profile-layout .about-profile-visual{width:min(100%,430px);justify-self:end}.about-profile-layout .about-photo-placeholder{height:520px;border-radius:18px;border:3px solid #fff;box-shadow:0 25px 65px #3a30202b;background:linear-gradient(145deg,#d4d7d4,#f3f0e9 48%,#b8b4ab)} .about-profile-layout .about-name{margin:12px 0 0;text-align:left;font-size:15px;color:#544d45;letter-spacing:.2em}.about-status-card{right:-38px;bottom:72px;left:auto;top:auto;width:190px;height:112px;padding:19px;background:#f8f5ed!important;transform:translate3d(var(--about-x,0),var(--about-y,0),0) rotate(0deg)!important;animation:none}.about-status-card span{color:#9b8b73;font-size:10px;letter-spacing:.2em}.about-status-card strong{font-size:16px;color:#3b3731}.about-status-card small{font-size:10px;color:#81786c} @media(max-width:700px){.about-profile-layout{display:flex;flex-direction:column-reverse;gap:38px;min-height:0}.about-intro-copy{width:100%;padding-top:0}.about-intro-copy h1{font-size:48px;margin-top:24px}.about-profile-layout .about-profile-visual{width:92%;align-self:center}.about-profile-layout .about-photo-placeholder{height:390px}.about-status-card{right:-18px;bottom:52px;width:165px;height:98px}.about-manifesto{font-size:13px}.about-actions{gap:8px}.about-action{padding:10px 18px}} /* Works-only orbit archive. Every selector is scoped to #works. */ #works.works-page{position:relative;min-height:100vh;overflow:hidden;padding:116px 5vw 46px;background:var(--paper)} #works .works-orbit-header{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px;color:var(--muted);font-size:11px;letter-spacing:.18em} #works .works-orbit-header strong{color:var(--ink);font-size:13px;letter-spacing:.22em}#works .works-orbit-header small{margin-left:auto;font-size:9px;letter-spacing:.12em} #works .works-orbit-intro{position:relative;z-index:5;width:min(310px,34vw);margin-top:52px;color:var(--ink)}#works .works-orbit-intro span{font-size:10px;letter-spacing:.2em;color:var(--muted)} #works .works-orbit-intro h2{margin:16px 0 12px;font-size:clamp(38px,5vw,76px);line-height:.88;letter-spacing:-.08em;font-weight:500}#works .works-orbit-intro h2 em{font-style:normal;color:#b8382e} #works .works-orbit-intro p{margin:0;color:var(--muted);font-size:12px;line-height:1.8;letter-spacing:.08em} #works .works-orbit-stage{position:absolute;inset:150px 4vw 70px 28vw;min-height:480px;perspective:1400px;--orbit-x:0px;--orbit-y:0px} #works .works-orbit-ring{position:absolute;left:50%;top:50%;width:min(42vw,560px);height:min(42vw,560px);transform:translate(-50%,-50%) rotate(-13deg);border:1px solid #b8382e42;border-radius:50%;box-shadow:0 0 0 24px #b8382e08,0 0 0 48px #b8382e04;pointer-events:none} #works .works-orbit-center{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);width:160px;height:160px;border:1px solid #b8382e55;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f8f3ebd9;color:#b8382e;text-align:center;letter-spacing:.16em} #works .works-orbit-center span{font-size:9px}#works .works-orbit-center strong{margin:9px 0 5px;font-size:17px;letter-spacing:.26em}#works .works-orbit-center small{font-size:8px;color:var(--muted)} #works .works-orbit-card{position:absolute;z-index:2;width:clamp(170px,17vw,246px);height:clamp(235px,36vh,350px);transform:translate3d(var(--orbit-x),var(--orbit-y),0) rotate(var(--card-angle)) translate(var(--card-x),var(--card-y));animation:works-orbit-float 9s ease-in-out infinite;animation-delay:var(--orbit-delay);transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .35s;will-change:transform} #works .orbit-card-1{left:13%;top:10%;--card-x:-15%;--card-y:-3%;--card-angle:-8deg}#works .orbit-card-2{left:49%;top:3%;--card-x:-50%;--card-y:-4%;--card-angle:5deg}#works .orbit-card-3{left:81%;top:38%;--card-x:-50%;--card-y:-50%;--card-angle:9deg}#works .orbit-card-4{left:30%;top:79%;--card-x:-50%;--card-y:-50%;--card-angle:-5deg} #works .works-orbit-stage.is-paused .works-orbit-card{animation-play-state:paused}#works .works-orbit-card.is-hovered{z-index:10;transform:translate3d(var(--orbit-x),var(--orbit-y),0) rotate(0deg) translate(var(--card-x),var(--card-y)) scale(1.08);filter:drop-shadow(0 22px 24px #392d2028)} #works .works-orbit-hit{width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;perspective:1200px;font:inherit}#works .works-orbit-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.7,.2,1)}#works .works-orbit-card.is-flipped .works-orbit-inner{transform:rotateY(180deg)} #works .works-orbit-face{position:absolute;inset:0;display:flex;flex-direction:column;backface-visibility:hidden;overflow:hidden;border:1px solid #d2c8ba;background:#f8f3eb;box-shadow:0 18px 42px #392d201c;text-align:left}#works .works-orbit-front img{width:100%;height:70%;object-fit:cover;display:block;filter:saturate(.78) sepia(.08)} #works .works-orbit-front .orbit-no,#works .works-orbit-back .orbit-no{position:absolute;top:12px;right:14px;font-size:9px;letter-spacing:.18em;color:#625b53}#works .orbit-label{margin:auto 15px 2px;color:var(--muted);font-size:8px;letter-spacing:.2em}#works .works-orbit-front strong{margin:0 15px 16px;color:#3d3731;font-size:16px;font-weight:500;letter-spacing:.06em} #works .works-orbit-back{transform:rotateY(180deg);padding:30px 22px 20px;background:var(--card-tone);color:#fff;justify-content:center}#works .works-orbit-back strong{font-size:24px;font-weight:500;letter-spacing:.06em}#works .works-orbit-back p{margin:16px 0;line-height:1.8;font-size:12px}#works .works-orbit-back small{font-size:8px;letter-spacing:.16em;opacity:.78}#works .works-orbit-back i{margin-top:auto;font-style:normal;font-size:9px;letter-spacing:.16em;opacity:.82} #works .works-orbit-footer{position:absolute;left:5vw;right:5vw;bottom:24px;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:.16em}@keyframes works-orbit-float{0%,100%{margin-top:0}50%{margin-top:-13px}} @media(max-width:800px){#works.works-page{padding:92px 24px 70px}#works .works-orbit-header small{display:none}#works .works-orbit-intro{width:100%;margin-top:34px}#works .works-orbit-intro h2{font-size:48px}#works .works-orbit-stage{position:relative;inset:auto;min-height:620px;margin-top:28px}#works .works-orbit-ring{width:360px;height:360px}#works .works-orbit-center{width:120px;height:120px}#works .works-orbit-center strong{font-size:14px}#works .works-orbit-card{width:148px;height:216px}#works .orbit-card-1{left:18%;top:5%}#works .orbit-card-2{left:80%;top:18%}#works .orbit-card-3{left:70%;top:66%}#works .orbit-card-4{left:22%;top:73%}#works .works-orbit-footer{left:24px;right:24px;bottom:22px;font-size:8px}} /* Works central-axis carousel. Scoped exclusively to #works. */ #works.works-page{position:relative;min-height:100vh;height:100vh;overflow:hidden;padding:116px 5vw 42px;background:var(--paper)} #works .works-axis-header{position:relative;z-index:10;display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px;color:var(--muted);font-size:11px;letter-spacing:.18em} #works .works-axis-header strong{color:var(--ink);font-size:13px;letter-spacing:.22em}#works .works-axis-header small{margin-left:auto;font-size:9px;letter-spacing:.12em} #works .works-axis-intro{position:relative;z-index:8;margin-top:44px;color:var(--ink)}#works .works-axis-intro>span{font-size:10px;letter-spacing:.2em;color:var(--muted)} #works .works-axis-intro h2{margin:15px 0 11px;font-size:clamp(42px,5vw,76px);line-height:.86;letter-spacing:-.08em;font-weight:500}#works .works-axis-intro h2 em{font-style:normal;color:#b8382e} #works .works-axis-intro p{margin:0;font-size:11px;line-height:1.8;letter-spacing:.07em;color:var(--muted)} #works .works-axis-stage{position:absolute;inset:90px 4vw 48px 23vw;perspective:1500px;touch-action:pan-y;cursor:grab} #works .works-axis-stage:active{cursor:grabbing}#works .works-axis-line{position:absolute;left:50%;top:8%;bottom:9%;border-left:1px solid #b8382e46;transform:translateX(-50%);z-index:0} #works .works-axis-line:before,#works .works-axis-line:after{content:'';position:absolute;left:-4px;width:7px;height:7px;border:1px solid #b8382e66;border-radius:50%;background:var(--paper)}#works .works-axis-line:before{top:0}#works .works-axis-line:after{bottom:0} #works .works-axis-glow{position:absolute;left:50%;top:50%;width:110px;height:110px;transform:translate(-50%,-50%);border:1px solid #b8382e3a;border-radius:50%;box-shadow:0 0 0 20px #b8382e0b,0 0 0 42px #b8382e05;z-index:0;animation:works-axis-pulse 4s ease-in-out infinite} #works .works-axis-carousel{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--axis-rotation,0deg));transition:transform 1.05s cubic-bezier(.18,.75,.22,1);will-change:transform} #works .works-axis-card{position:absolute;left:50%;top:50%;width:clamp(190px,21vw,292px);height:clamp(290px,53vh,430px);transform-style:preserve-3d;transform:translate(-50%,-50%) rotateY(calc(var(--card-angle) + var(--axis-rotation,0deg))) translateZ(clamp(185px,18vw,270px));transition:filter .35s;will-change:transform} #works .axis-card-1{--card-angle:0deg}#works .axis-card-2{--card-angle:90deg}#works .axis-card-3{--card-angle:180deg}#works .axis-card-4{--card-angle:270deg} #works .works-axis-card.is-hovered{filter:drop-shadow(0 22px 24px #392d2030)}#works .works-axis-stage.is-paused .works-axis-glow{animation-play-state:paused} #works .works-axis-hit{width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit;perspective:1200px}#works .works-axis-card-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .78s cubic-bezier(.2,.7,.2,1)}#works .works-axis-card.is-flipped .works-axis-card-inner{transform:rotateY(180deg)} #works .works-axis-face{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #d1c6b9;background:#f6f1e7;box-shadow:0 20px 46px #392d2022;text-align:left} #works .works-axis-front img{display:block;width:100%;height:75%;object-fit:cover;filter:saturate(.82) contrast(.97)}#works .works-axis-front .axis-no,#works .works-axis-back .axis-no{position:absolute;top:13px;right:14px;font-size:9px;letter-spacing:.18em;color:#5e574e} #works .axis-label{margin:auto 16px 3px;font-size:8px;letter-spacing:.2em;color:#7b7167}#works .works-axis-front strong{margin:0 16px 17px;font-size:17px;font-weight:500;letter-spacing:.05em;color:#3d3731}#works .works-axis-front i{position:absolute;right:15px;bottom:17px;font-style:normal;font-size:8px;letter-spacing:.15em;color:#8d8275} #works .works-axis-back{transform:rotateY(180deg);justify-content:center;padding:30px 23px 20px;background:var(--card-tone);color:#fff}#works .works-axis-back .axis-no{color:#ffffffbb}#works .works-axis-back strong{font-size:25px;font-weight:500;letter-spacing:.04em}#works .works-axis-back p{margin:17px 0;line-height:1.8;font-size:12px}#works .works-axis-back small{font-size:8px;letter-spacing:.16em;opacity:.8}#works .works-axis-back i{margin-top:auto;font-style:normal;font-size:8px;letter-spacing:.16em;opacity:.82} #works .works-axis-control{position:absolute;top:50%;z-index:5;border:1px solid #b8382e55;background:#f8f3ebd9;color:#b8382e;width:36px;height:36px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;transition:transform .25s,background .25s}#works .works-axis-control:hover{transform:scale(1.1);background:#f8f3eb} #works .works-axis-prev{left:4%}#works .works-axis-next{right:4%}#works .works-axis-counter{position:absolute;right:4%;bottom:6%;font-size:9px;letter-spacing:.2em;color:#5f584f}#works .works-axis-footer{position:absolute;left:5vw;right:5vw;bottom:22px;z-index:8;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:.16em} @keyframes works-axis-pulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.13)}} @media(max-width:800px){#works.works-page{height:auto;min-height:100svh;padding:92px 24px 70px}#works .works-axis-header small{display:none}#works .works-axis-intro{margin-top:32px}#works .works-axis-intro h2{font-size:50px}#works .works-axis-stage{position:relative;inset:auto;height:610px;margin-top:12px;perspective:1000px}#works .works-axis-card{width:154px;height:230px;transform:translate(-50%,-50%) rotateY(calc(var(--card-angle) + var(--axis-rotation,0deg))) translateZ(175px)}#works .works-axis-front img{height:72%}#works .works-axis-front strong{font-size:14px;margin-left:11px}#works .axis-label{margin-left:11px}#works .works-axis-control{top:50%;width:31px;height:31px}#works .works-axis-prev{left:0}#works .works-axis-next{right:0}#works .works-axis-footer{left:24px;right:24px;bottom:22px;font-size:8px}} @media(prefers-reduced-motion:reduce){#works .works-axis-carousel{transition:none}#works .works-axis-glow{animation:none}} /* Final handoff polish: keep Works centered and card-only. */ #works.works-page{padding:0;min-height:100vh;height:100vh} #works .works-axis-stage{inset:0;min-height:0;touch-action:pan-y} #works .works-axis-line,#works .works-axis-glow{display:none} #works .works-axis-card{width:clamp(178px,19vw,260px);height:clamp(270px,48vh,390px)} #works .works-axis-control{top:50%;transform:translateY(-50%)} #works .works-axis-control:hover{transform:translateY(-50%) scale(1.1)} #works .works-axis-footer,#works .works-axis-counter{display:none} .about-manifesto{padding:0;margin-bottom:25px;background:transparent;border:0;border-radius:0;box-shadow:none;color:#655e55} .about-school,.about-tags span{color:#7b5a42} .about-tags span{border-color:#bda58f;background:transparent} @media(max-width:800px){#works.works-page{height:100svh;min-height:100svh;padding:0}#works .works-axis-stage{height:100svh;margin:0}#works .works-axis-card{width:154px;height:230px}} /* Internship detail: a vertical resume timeline opened by the first card. */ #works .works-internship-detail{position:absolute;inset:0;z-index:20;overflow:auto;padding:clamp(34px,6vw,86px) clamp(24px,10vw,150px);background:var(--paper);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(28px);transition:opacity .45s ease,transform .45s ease,visibility .45s} #works .works-axis-stage.is-detail-open .works-internship-detail{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} #works .works-detail-close{position:absolute;top:28px;right:clamp(24px,6vw,90px);border:0;background:none;color:var(--muted);font:inherit;font-size:11px;letter-spacing:.1em;cursor:pointer} #works .works-detail-bottom-close{display:block;margin:4px auto 20px;padding:11px 24px;border:1px solid #b8382e66;border-radius:999px;background:transparent;color:#82644e;font:inherit;font-size:11px;letter-spacing:.1em;cursor:pointer;transition:background .25s,color .25s} #works .works-detail-bottom-close:hover{background:#b8382e;color:#fff} #works .works-detail-heading{max-width:620px;margin:0 auto 48px;text-align:center;color:var(--ink)} #works .works-detail-heading span{font-size:10px;letter-spacing:.2em;color:#b8382e} #works .works-detail-heading h2{margin:14px 0 10px;font-size:clamp(34px,5vw,66px);font-weight:500;letter-spacing:-.08em} #works .works-detail-heading p{margin:0;color:var(--muted);font-size:12px;letter-spacing:.08em} #works .works-timeline{position:relative;max-width:820px;margin:0 auto;padding:4px 0 30px} #works .works-timeline:before{content:'';position:absolute;left:164px;top:0;bottom:0;width:1px;background:#b8382e55} #works .works-timeline-item{position:relative;display:grid;grid-template-columns:140px 48px 1fr;gap:0;min-height:170px;color:var(--ink)} #works .works-timeline-date{padding-top:7px;text-align:right;color:#82644e;font-size:11px;line-height:1.5;letter-spacing:.04em} #works .works-timeline-dot{position:relative;z-index:1;width:10px;height:10px;margin:8px auto 0;border:2px solid var(--paper);border-radius:50%;background:#b8382e;box-shadow:0 0 0 1px #b8382e} #works .works-timeline-content{padding:0 0 42px 18px} #works .works-timeline-content>span{color:#82644e;font-size:10px;letter-spacing:.05em} #works .works-timeline-content h3{margin:9px 0 10px;font-size:20px;font-weight:500;letter-spacing:.02em} #works .works-timeline-content p{max-width:560px;margin:0;color:#686056;font-size:12px;line-height:1.85} #works .works-timeline-content p+p{margin-top:9px} #works .works-timeline-metrics{display:flex;align-items:baseline;gap:8px;margin-top:16px;color:#b8382e} #works .works-timeline-metrics b{font-size:20px;font-weight:500}.works-timeline-metrics small{margin-right:14px;color:var(--muted);font-size:9px} @media(max-width:700px){#works .works-internship-detail{padding:72px 22px 28px}#works .works-detail-heading{margin-bottom:34px;text-align:left}#works .works-detail-heading h2{font-size:48px}#works .works-timeline:before{left:8px}#works .works-timeline-item{display:block;min-height:0;padding-left:28px}#works .works-timeline-date{text-align:left;padding:0 0 8px;color:#82644e}#works .works-timeline-dot{position:absolute;left:4px;top:0;margin:0}#works .works-timeline-content{padding:0 0 38px}#works .works-timeline-content h3{font-size:18px}#works .works-timeline-metrics{flex-wrap:wrap;gap:5px}.works-timeline-metrics small{margin-right:8px}} @media(prefers-reduced-motion:reduce){#works .works-internship-detail{transition:none}} /* Selected project card: pull-out paper animation inspired by the supplied video. */ #works .works-project-detail{position:absolute;inset:0;z-index:21;overflow:hidden;padding:clamp(28px,5vw,70px) 24px;background:#fff;opacity:0;visibility:hidden;pointer-events:none;transform:scale(.98);transition:opacity .45s ease,transform .45s ease,visibility .45s} #works .works-axis-stage.is-project-open .works-project-detail{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)} #works .works-project-close{position:absolute;top:28px;right:clamp(24px,6vw,90px);z-index:5;border:0;background:none;color:#77716a;font:inherit;font-size:11px;letter-spacing:.1em;cursor:pointer} #works .project-stamp{position:absolute;left:50%;top:50%;width:min(330px,72vw);height:min(220px,48vw);transform:translate(-50%,-50%);background:#f7f7f2;border:1px solid #e5e5dd;box-shadow:0 18px 42px #342e2514;overflow:visible} #works .project-stamp:before,#works .project-stamp:after{content:'';position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 5px 0,#fff 0 5px,transparent 5.5px) 0 0/16px 10px repeat-x} #works .project-stamp:before{top:-5px}#works .project-stamp:after{bottom:-5px;transform:rotate(180deg)} #works .project-stamp-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#aaa9a1;text-align:center;font-family:monospace;pointer-events:none} #works .project-stamp-copy span{font-size:9px;letter-spacing:.16em}.project-stamp-copy strong{margin:8px 0;font-family:inherit;font-size:27px;font-weight:400;letter-spacing:.1em}.project-stamp-copy small{font-size:8px;letter-spacing:.08em} #works .project-stamp-meta{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;color:#9d9c94;font-family:monospace;font-size:8px;letter-spacing:.04em} #works .project-pull-deck{position:absolute;inset:0;z-index:2;pointer-events:none} #works .project-pull-card{position:absolute;left:50%;top:50%;width:min(215px,46vw);height:min(245px,52vw);padding:10px;background:#f4f1e9;box-shadow:0 15px 32px #342e2528;opacity:0;animation:projectPullOut 7s ease-in-out infinite;animation-delay:var(--pull-delay);transform-origin:50% 100%} #works .project-pull-card img{display:block;width:100%;height:calc(100% - 22px);object-fit:cover}.project-pull-card span{display:block;margin-top:6px;color:#817d74;font-family:monospace;font-size:8px;letter-spacing:.1em} #works .project-pull-one{--pull-delay:0s;--pull-rotate:-7deg}#works .project-pull-two{--pull-delay:2.1s;--pull-rotate:5deg}#works .project-pull-three{--pull-delay:4.2s;--pull-rotate:-3deg} @keyframes projectPullOut{0%,8%{opacity:0;transform:translate(-50%,-28%) rotate(var(--pull-rotate)) scale(.72)}18%,48%{opacity:1;transform:translate(-50%,-58%) rotate(0deg) scale(1)}62%,100%{opacity:0;transform:translate(-50%,-28%) rotate(var(--pull-rotate)) scale(.72)}} #works .project-detail-caption{position:absolute;left:50%;bottom:clamp(32px,8vh,80px);width:min(500px,78vw);transform:translateX(-50%);margin:0;color:#8a867e;text-align:center;font-size:11px;letter-spacing:.08em;line-height:1.8} @media(max-width:700px){#works .project-stamp{width:285px;height:190px}#works .project-stamp-copy strong{font-size:23px}#works .project-stamp-meta{font-size:7px}#works .project-pull-card{width:180px;height:210px}} @media(prefers-reduced-motion:reduce){#works .project-pull-card{animation:none;opacity:1;transform:translate(-50%,-58%) rotate(0) scale(1)}#works .project-pull-two,#works .project-pull-three{display:none}#works .works-project-detail{transition:none}} /* Keep all four Works cards readable instead of leaving two cards edge-on. */ #works .works-axis-carousel{transform:none!important;inset:0} #works .works-axis-card{transform:translate(-50%,-50%) rotate(var(--card-rotate,0deg))!important;translate:0 0;} #works .axis-card-1{left:34%;top:35%;--card-rotate:-4deg} #works .axis-card-2{left:66%;top:35%;--card-rotate:4deg} #works .axis-card-3{left:66%;top:65%;--card-rotate:3deg} #works .axis-card-4{left:34%;top:65%;--card-rotate:-3deg} #works .works-axis-card.is-active{z-index:8;filter:drop-shadow(0 22px 24px #392d2030)} #works .works-axis-card.is-active .works-axis-card-inner{transform:scale(1.045)} #works .works-axis-card.is-flipped.is-active .works-axis-card-inner{transform:scale(1.045) rotateY(180deg)} @media(min-width:701px){#works .works-axis-card{width:clamp(160px,16vw,220px);height:clamp(220px,30vh,300px)}} @media(max-width:700px){#works .axis-card-1{left:31%;top:34%}#works .axis-card-2{left:69%;top:34%}#works .axis-card-3{left:69%;top:66%}#works .axis-card-4{left:31%;top:66%}} /* Vibe coding detail: image-led project introduction. */ #works .works-vibe-detail{position:absolute;inset:0;z-index:22;overflow:auto;padding:clamp(80px,10vh,130px) clamp(30px,10vw,150px);background:#f8f3eb;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(24px);transition:opacity .45s ease,transform .45s ease,visibility .45s} #works .works-axis-stage.is-vibe-open .works-vibe-detail{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} #works .works-vibe-close{position:absolute;top:28px;right:clamp(24px,6vw,90px);border:0;background:none;color:#776e63;font:inherit;font-size:11px;letter-spacing:.1em;cursor:pointer} #works .works-vibe-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,420px);align-items:center;gap:clamp(46px,9vw,150px);width:min(100%,980px);min-height:70vh;margin:0 auto} #works .works-vibe-image-link{position:relative;display:block;width:min(100%,480px);justify-self:center;text-decoration:none;cursor:pointer;filter:drop-shadow(0 20px 30px #3d2d1d1c);transition:transform .35s ease} #works .works-vibe-image-link:hover{transform:translateY(-8px) rotate(-1deg)} #works .works-vibe-image-link img{display:block;width:100%;height:auto;border:1px solid #eadfd3} #works .works-vibe-image-link>span{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);white-space:nowrap;padding:9px 14px;border:1px solid #8b5a3c66;border-radius:999px;background:#fbf7f0e8;color:#7c563e;font-size:11px;letter-spacing:.06em} #works .works-vibe-image-link>span b,#works .works-vibe-link b{margin-left:7px;font-size:15px;font-weight:400} #works .works-vibe-copy{max-width:390px;color:var(--ink)} #works .works-vibe-eyebrow{color:#9b6849;font-size:10px;letter-spacing:.18em} #works .works-vibe-copy h2{margin:18px 0 22px;font-size:clamp(42px,6vw,76px);font-weight:500;letter-spacing:-.08em} #works .works-vibe-copy p{margin:0;color:#635a50;font-size:14px;line-height:2;letter-spacing:.04em} #works .works-vibe-link{display:inline-block;margin-top:30px;padding-bottom:6px;border-bottom:1px solid #8b5a3c;text-decoration:none;color:#8b5a3c;font-size:12px;letter-spacing:.1em} @media(max-width:700px){#works .works-vibe-detail{padding:72px 24px 48px}#works .works-vibe-layout{display:flex;flex-direction:column;justify-content:center;gap:34px;min-height:calc(100svh - 120px)}#works .works-vibe-image-link{width:min(100%,330px)}#works .works-vibe-image-link>span{bottom:14px;font-size:10px}#works .works-vibe-copy{width:min(100%,390px)}#works .works-vibe-copy h2{margin:12px 0 15px;font-size:48px}#works .works-vibe-copy p{font-size:13px}} @media(prefers-reduced-motion:reduce){#works .works-vibe-detail{transition:none}} /* Final Works carousel: four cards on a perspective arc, matching the reference motion. */ #works .works-axis-carousel{transform:none!important;inset:0;transform-style:preserve-3d} #works .works-axis-card{left:50%!important;top:50%!important;width:clamp(160px,16vw,220px);height:clamp(220px,30vh,300px);transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .35s,opacity .5s!important} #works .works-axis-card[data-position="0"]{z-index:8;opacity:1;transform:translate3d(-50%,-50%,220px) rotateY(0deg) scale(1)!important} #works .works-axis-card[data-position="1"]{z-index:6;opacity:.94;transform:translate3d(calc(-50% + 210px),-50%,120px) rotateY(-28deg) scale(.88)!important} #works .works-axis-card[data-position="2"]{z-index:7;opacity:.82;transform:translate3d(calc(-50% + 440px),-50%,0) rotateY(-52deg) scale(.72)!important} #works .works-axis-card[data-position="3"]{z-index:6;opacity:.94;transform:translate3d(calc(-50% - 210px),-50%,120px) rotateY(28deg) scale(.88)!important} #works .works-axis-card.is-hovered{filter:drop-shadow(0 22px 24px #392d2030)} #works .works-axis-card.is-active .works-axis-card-inner{transform:none} #works .works-axis-card.is-flipped .works-axis-card-inner{transform:rotateY(180deg)} @media(max-width:700px){#works .works-axis-card{width:154px;height:230px}#works .works-axis-card[data-position="0"]{transform:translate3d(-50%,-50%,150px) rotateY(0deg) scale(1)!important}#works .works-axis-card[data-position="1"]{transform:translate3d(calc(-50% + 128px),-50%,80px) rotateY(-25deg) scale(.8)!important}#works .works-axis-card[data-position="2"]{transform:translate3d(calc(-50% + 210px),-50%,0) rotateY(-45deg) scale(.66)!important}#works .works-axis-card[data-position="3"]{transform:translate3d(calc(-50% - 128px),-50%,80px) rotateY(25deg) scale(.8)!important}} @media(prefers-reduced-motion:reduce){#works .works-axis-card{transition:none!important}} /* True 3D carousel: cards orbit one central Y axis. */ #works .works-axis-stage{perspective:1500px;perspective-origin:50% 50%} #works .works-axis-stage:before{content:'';position:absolute;left:50%;top:18%;bottom:18%;width:1px;background:linear-gradient(transparent,#b8382e55 20%,#b8382e55 80%,transparent);transform:translateX(-50%);z-index:0;pointer-events:none} #works .works-axis-carousel{inset:0;transform-style:preserve-3d;transform:rotateY(calc(var(--axis-rotation,0deg) + var(--pointer-tilt,0deg)))!important;transition:transform 1.05s cubic-bezier(.18,.75,.22,1)!important} #works .works-axis-card{left:50%!important;top:50%!important;width:clamp(170px,19vw,250px);height:clamp(250px,43vh,360px);transform-style:preserve-3d;transition:filter .35s!important;opacity:1!important} #works .works-axis-card[data-position="0"],#works .works-axis-card[data-position="1"],#works .works-axis-card[data-position="2"],#works .works-axis-card[data-position="3"]{transform:translate(-50%,-50%) rotateY(var(--card-angle)) translateZ(clamp(190px,22vw,310px))!important} #works .works-axis-card.is-active{z-index:8;filter:drop-shadow(0 22px 26px #392d2035)} #works .works-axis-card.is-active .works-axis-card-inner{transform:none} #works .works-axis-card.is-flipped .works-axis-card-inner{transform:rotateY(180deg)} @media(max-width:700px){#works .works-axis-stage{perspective:1000px}#works .works-axis-card{width:150px;height:224px}#works .works-axis-card[data-position="0"],#works .works-axis-card[data-position="1"],#works .works-axis-card[data-position="2"],#works .works-axis-card[data-position="3"]{transform:translate(-50%,-50%) rotateY(var(--card-angle)) translateZ(175px)!important}} /* Hide the axis guide while keeping the reference video's oblique card angles. */ #works .works-axis-stage:before{display:none} #works .axis-card-1{--card-angle:0deg} #works .axis-card-2{--card-angle:-90deg} #works .axis-card-3{--card-angle:180deg} #works .axis-card-4{--card-angle:90deg} @media(prefers-reduced-motion:reduce){#works .works-axis-carousel{transition:none!important;transform:rotateY(var(--axis-rotation,0deg))!important}#works .works-axis-card{transition:none!important}} /* Return buttons use the same red as Home's about me link. */ #works .works-detail-close,#works .works-detail-bottom-close,#works .works-project-close,#works .works-vibe-close{color:#B8382E} #works .works-detail-bottom-close{border-color:#B8382E} #works .works-detail-bottom-close:hover{background:#B8382E;color:#fff} /* Data-driven representative-project stack. */ #works .works-project-detail{background:#e8f3ed} #works .project-stack-shell{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(360px,1.1fr);align-items:center;gap:clamp(34px,8vw,110px);width:min(100%,980px);min-height:72vh;margin:0 auto} #works .project-stack-copy{color:#3d342b;max-width:280px} #works .project-stack-copy>span{color:#b9573e;font-size:10px;letter-spacing:.18em} #works .project-stack-copy h2{margin:17px 0 14px;font-size:clamp(40px,5vw,68px);font-weight:500;letter-spacing:-.08em} #works .project-stack-copy p{margin:0;color:#695f53;font-size:13px;line-height:1.9} #works .project-stack-copy small{display:block;margin-top:25px;color:#b9573e;font-size:9px;letter-spacing:.13em} #works .project-stack{position:relative;width:min(100%,470px);height:450px;justify-self:center;perspective:1100px} #works .project-stack-card{position:absolute;left:50%;top:50%;width:min(285px,66vw);height:385px;padding:0;border:1px solid #eadfd1;border-radius:22px;background:#fffaf0;color:#453a30;overflow:hidden;cursor:pointer;box-shadow:0 18px 35px #66524020;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.75,.22,1),box-shadow .5s,opacity .45s;will-change:transform} #works .project-stack-card:nth-child(1){z-index:3;transform:translate(-62%,-45%) rotate(-7deg)} #works .project-stack-card:nth-child(2){z-index:2;transform:translate(-48%,-53%) rotate(3deg)} #works .project-stack-card:nth-child(3){z-index:1;transform:translate(-34%,-61%) rotate(8deg)} #works .project-stack-card:hover,#works .project-stack-card.is-selected{z-index:10;box-shadow:0 30px 55px #66524036} #works .project-stack-card:nth-child(1).is-selected{transform:translate(-82%,-54%) rotate(-3deg) scale(1.05)} #works .project-stack-card:nth-child(2).is-selected{transform:translate(-50%,-70%) rotate(-3deg) scale(1.05)} #works .project-stack-card:nth-child(3).is-selected{transform:translate(-18%,-72%) rotate(-3deg) scale(1.05)} #works .project-stack-card img{display:block;width:100%;height:55%;object-fit:cover;pointer-events:none} #works .project-stack-info{height:45%;padding:16px 19px 17px;background:#fffaf0;opacity:0;transform:translateY(12px);transition:opacity .42s ease,transform .58s cubic-bezier(.2,.75,.22,1)} #works .project-stack-card.is-selected .project-stack-info{opacity:1;transform:translateY(0)} #works .project-stack-info>span{color:#b9573e;font-size:8px;letter-spacing:.16em} #works .project-stack-info h3{margin:8px 0 4px;font-size:20px;font-weight:500} #works .project-stack-info strong{display:block;color:#e17b45;font-size:13px;font-weight:500} #works .project-stack-info p{margin:8px 0 10px;color:#786d60;font-size:10px;line-height:1.55} #works .project-stack-case{display:inline-block;color:#b9573e;text-decoration:none;font-size:10px;letter-spacing:.08em;border-bottom:1px solid #b9573e;padding-bottom:3px} @media(max-width:700px){#works .works-project-detail{padding:72px 22px 38px}#works .project-stack-shell{display:flex;flex-direction:column;justify-content:center;gap:16px;min-height:calc(100svh - 100px)}#works .project-stack-copy{max-width:360px;text-align:center}#works .project-stack-copy h2{margin:8px 0;font-size:45px}#works .project-stack-copy p{font-size:12px;line-height:1.65}#works .project-stack-copy small{margin-top:12px}#works .project-stack{width:100%;height:390px}#works .project-stack-card{width:245px;height:330px}#works .project-stack-info{padding:12px 15px}.project-stack-info h3{font-size:17px}.project-stack-info p{font-size:9px}} @media(prefers-reduced-motion:reduce){#works .project-stack-card,#works .project-stack-info{transition:none!important}} /* Representative project: three cards resting inside a realistically layered envelope. */ #works .works-project-detail{background:#fbf8f2;display:flex;align-items:center;justify-content:center} #works .works-axis-stage.is-project-open>.works-axis-carousel, #works .works-axis-stage.is-project-open>.works-axis-line, #works .works-axis-stage.is-project-open>.works-axis-glow{visibility:hidden} #works .project-visual-close{color:#B8382E!important;font-size:22px!important;line-height:1} #works .project-envelope-scene{position:relative;width:min(680px,92vw);height:min(680px,84vh);overflow:hidden} #works .project-envelope{position:absolute;left:50%;top:52%;width:min(390px,62vw);height:auto;transform:translate(-50%,-50%);pointer-events:none} #works .project-envelope-base{z-index:1;filter:drop-shadow(0 22px 28px #604c3a26)} #works .project-envelope-front{z-index:3;clip-path:inset(64% 0 0)} #works .project-envelope-cards{position:absolute;left:50%;top:52%;z-index:2;width:min(390px,62vw);aspect-ratio:900/1070;transform:translate(-50%,-50%);clip-path:polygon(28% 25%,74% 25%,74% 38%,98% 41%,98% 46%,84% 64%,16% 64%,2% 46%,2% 41%,28% 38%)} #works .project-stack-card{position:absolute;padding:0;border:0;border-radius:3px;background:transparent;overflow:hidden;box-shadow:0 12px 24px #4d3c302b;cursor:pointer;transition:filter .25s ease,opacity .2s ease} #works .project-stack-card:hover{filter:brightness(1.04) drop-shadow(0 8px 8px #49382d24)} #works .project-stack-card:focus-visible{outline:2px solid #B8382E;outline-offset:-3px} #works .project-stack-card.is-selected{opacity:0} #works .project-stack-card:nth-child(1){left:1%;top:36%;z-index:1;width:54%;aspect-ratio:5/7;transform:rotate(-4deg);transform-origin:50% 100%} #works .project-stack-card:nth-child(2){left:50%;top:25%;z-index:3;width:47%;aspect-ratio:5/7;transform:translateX(-50%);transform-origin:50% 100%} #works .project-stack-card:nth-child(3){right:1%;top:36%;z-index:2;width:54%;aspect-ratio:5/7;transform:rotate(4deg);transform-origin:50% 100%} #works .project-stack-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none} .project-card-focus{position:fixed;left:var(--focus-left);top:var(--focus-top);z-index:1000;width:var(--focus-width);height:var(--focus-height);padding:0;border:0;border-radius:4px;overflow:hidden;background:#f8f2e9;cursor:zoom-out;box-shadow:0 28px 64px #46332852;transform-origin:center;transform:translate(var(--focus-dx),var(--focus-dy)) scale(var(--focus-sx),var(--focus-sy)) rotate(var(--focus-rotate));clip-path:inset(0 0 42% 0);opacity:.96;transition:transform .68s cubic-bezier(.18,.78,.2,1),clip-path .54s cubic-bezier(.18,.78,.2,1),box-shadow .68s ease,opacity .25s ease;will-change:transform} .project-card-focus.is-visible{transform:translate(0,0) scale(1) rotate(0deg);clip-path:inset(0);opacity:1;box-shadow:0 34px 76px #46332868} .project-card-focus img{display:block;width:100%;height:100%;object-fit:cover} #works .project-stack-info{display:none!important} @media(max-width:700px){#works .project-envelope-scene{width:100%;height:620px}#works .project-envelope,#works .project-envelope-cards{width:min(326px,76vw);top:54%}} @media(prefers-reduced-motion:reduce){#works .project-stack-card,.project-card-focus{transition:none!important}} /* Page routing: Home / About / Works are discrete views, never scroll-connected. */ html,body{width:100%;height:100%;overflow:hidden} main{height:100%;overflow:hidden} main>.page{position:fixed!important;inset:0!important;z-index:0;width:100%;height:100svh!important;min-height:100svh!important;opacity:0;visibility:hidden;pointer-events:none;overflow-x:hidden;transition:opacity .42s ease,visibility .42s} main>.page.is-page-active{z-index:1;opacity:1;visibility:visible;pointer-events:auto} #home.page,#works.page{overflow:hidden!important} #about.page{overflow-y:auto!important;overscroll-behavior:contain} .site-header{z-index:100;transform:none!important} .site-header nav a.is-current{color:#B8382E} .site-header nav a.is-current span{color:#B8382E} .about-works-link{display:inline-flex;align-items:center;gap:26px;margin-top:26px;color:#B8382E;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.22em;transition:gap .35s cubic-bezier(.2,.7,.2,1),opacity .25s} .about-works-link:hover{gap:36px;opacity:.78} .about-works-link span{font-size:17px} @media(max-width:700px){ .site-header.is-menu-open nav{position:absolute;display:flex;top:61px;left:0;right:0;flex-direction:column;gap:0;padding:10px 22px 16px;background:#f7f6f2f5;border-bottom:1px solid var(--line);box-shadow:0 12px 24px #30271f12} .site-header.is-menu-open nav a{padding:11px 0} .about-works-link{margin-top:22px} } @media(prefers-reduced-motion:reduce){main>.page{transition:none}} /* Middle representative-project card: integrated marketing + BD case study. */ .project-card-focus.is-case-detail{overflow:auto;border:1px solid #d9cfc1;border-radius:14px;background:#fbf8f2;color:#342f2a;cursor:default;text-align:left;overscroll-behavior:contain;scrollbar-width:thin} .project-case-detail-inner{position:relative;padding:clamp(28px,4vw,54px)} .project-case-layout{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.55fr);gap:clamp(28px,4vw,54px);align-items:start} .project-case-brief{position:sticky;top:0;margin:0;overflow:hidden;border:1px solid #ded4c8;border-radius:9px;background:#eee8dc;box-shadow:0 18px 38px #493b2e1c} .project-card-focus .project-case-brief img{display:block;width:100%;height:auto;aspect-ratio:2/5;object-fit:cover;object-position:top} .project-case-strategy-visual a{display:block;background:#fff} .project-card-focus .project-case-strategy-visual img{aspect-ratio:4/5;object-fit:contain;object-position:center;background:#fff} .project-case-brief figcaption{padding:11px 13px;color:#776d63;font-size:9px;line-height:1.5;letter-spacing:.08em} .project-case-copy{min-width:0} .project-case-close{position:sticky;z-index:3;top:0;float:right;width:34px;height:34px;margin:-10px -10px 0 18px;border:1px solid #b8382e55;border-radius:50%;background:#fbf8f2e8;color:#B8382E;font-size:22px;line-height:1;backdrop-filter:blur(8px)} .project-case-detail-inner header{padding-bottom:26px;border-bottom:1px solid #ded4c8} .project-case-detail-inner header span{color:#B8382E;font-size:9px;letter-spacing:.2em} .project-case-detail-inner header h2{margin:10px 0 8px;font-size:clamp(30px,3.8vw,48px);font-weight:500;line-height:1.05;letter-spacing:-.055em;white-space:nowrap} .project-strategy-case header h2{font-size:clamp(27px,3vw,38px);letter-spacing:-.045em} .project-case-detail-inner header p{margin:0;color:#8a7d70;font-size:10px;letter-spacing:.16em} .project-case-detail-inner section{display:grid;grid-template-columns:110px 1fr;gap:22px;padding:28px 0;border-bottom:1px solid #e4dbd0} .project-case-detail-inner section h3{margin:0;color:#B8382E;font-size:13px;font-weight:500;letter-spacing:.12em} .project-case-detail-inner section p,.project-case-detail-inner section ul{margin:0;color:#5f574f;font-size:13px;line-height:1.9} .project-case-detail-inner section ul{padding-left:18px} .project-case-detail-inner section li+li{margin-top:5px} .project-case-outcome p{padding:0;border-radius:0;background:transparent} .project-case-evidence{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;padding-top:30px} .project-case-evidence figure{margin:0;overflow:hidden;border:1px solid #ded4c8;border-radius:8px;background:#eee8dc} .project-card-focus .project-case-evidence img{display:block;width:100%;height:230px;object-fit:cover;object-position:top} .project-card-focus .project-case-evidence figure:last-child img{object-position:top center} .project-case-evidence figcaption{padding:10px 12px;color:#776d63;font-size:9px;letter-spacing:.08em} @media(max-width:700px){ .project-case-detail-inner{padding:25px 20px 32px} .project-case-layout{grid-template-columns:1fr;gap:28px} .project-case-brief{position:relative;top:auto;width:min(100%,260px);justify-self:center} .project-case-detail-inner header h2{font-size:clamp(24px,7vw,29px)} .project-case-detail-inner section{display:block;padding:24px 0} .project-case-detail-inner section h3{margin-bottom:12px} .project-case-detail-inner section p,.project-case-detail-inner section ul{font-size:12px;line-height:1.85} .project-case-evidence{grid-template-columns:1fr} .project-card-focus .project-case-evidence img{height:190px} } /* Unified Works return controls. */ #works .works-detail-close,#works .works-vibe-close,#works .works-project-close,#works .works-content-close{z-index:30;width:36px;height:36px;padding:0;border:1px solid #B8382E55;border-radius:50%;background:#fbf8f2db;color:#B8382E!important;font-size:24px!important;font-weight:300;line-height:31px!important;letter-spacing:0!important;text-align:center;backdrop-filter:blur(8px)} #works .works-axis-back i{position:absolute;top:13px;right:13px;width:30px;height:30px;margin:0;border:1px solid #ffffff88;border-radius:50%;font-size:22px;line-height:26px;text-align:center;letter-spacing:0;opacity:1} #works .works-content-detail{position:absolute;inset:0;z-index:23;display:grid;place-items:center;overflow:hidden;padding:70px 24px;background:#fbf8f2;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(24px);transition:opacity .45s ease,transform .45s ease,visibility .45s} #works .works-axis-stage.is-content-open .works-content-detail{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} #works .works-content-close{position:absolute;top:28px;right:clamp(24px,6vw,90px)} #works .works-content-copy{width:min(620px,88vw);text-align:center} #works .works-content-copy span{color:#B8382E;font-size:10px;letter-spacing:.2em} #works .works-content-copy h2{margin:14px 0 18px;font-size:clamp(46px,8vw,96px);font-weight:500;line-height:1;letter-spacing:-.08em} #works .works-content-copy p{margin:0 auto;max-width:440px;color:#746b62;font-size:13px;line-height:1.9;letter-spacing:.05em} #works .works-axis-stage.is-content-open>.works-axis-carousel{visibility:hidden} @media(prefers-reduced-motion:reduce){#works .works-content-detail{transition:none}} /* Keep every Works detail close button below the fixed site header. */ #works .works-detail-close,#works .works-vibe-close,#works .works-project-close,#works .works-content-close{top:90px!important} @media(max-width:700px){#works .works-detail-close,#works .works-vibe-close,#works .works-project-close,#works .works-content-close{top:76px!important;right:20px!important}} /* Text return controls for all four Works detail views. */ #works .works-detail-close,#works .works-vibe-close,#works .works-project-close,#works .works-content-close{width:auto;min-width:104px;height:36px;padding:0 8px;border:0;background:transparent;border-radius:0;box-shadow:none;backdrop-filter:none;font-size:11px!important;font-weight:500;line-height:34px!important;letter-spacing:.08em!important;white-space:nowrap} /* About text unfolds progressively when the page is entered. */ #about .about-text-piece{display:inline-block;opacity:0;filter:blur(5px);transform:translateY(.72em) rotateX(-38deg);transform-origin:50% 100%;will-change:opacity,transform,filter} #about.is-text-revealed .about-text-piece{animation:about-text-unfold .62s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--reveal-delay)} #about .about-reveal-block{opacity:0;transform:translateY(12px) scale(.97);will-change:opacity,transform} #about.is-text-revealed .about-reveal-block{animation:about-block-unfold .62s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--block-delay)} @keyframes about-text-unfold{0%{opacity:0;filter:blur(5px);transform:translateY(.72em) rotateX(-38deg)}100%{opacity:1;filter:blur(0);transform:translateY(0) rotateX(0)}} @keyframes about-block-unfold{0%{opacity:0;transform:translateY(12px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}} @media(prefers-reduced-motion:reduce){#about .about-text-piece,#about .about-reveal-block{opacity:1;filter:none;transform:none;animation:none!important}} #about .about-intro-copy h1{white-space:nowrap;font-size:clamp(44px,5.2vw,76px)} @media(max-width:700px){#about .about-intro-copy h1{font-size:clamp(39px,12vw,46px)}} /* Content Making — a three-frame strip unfolds downward from a printer slot. */ #works .works-content-detail{display:block;overflow:auto;padding:116px clamp(24px,6vw,88px) 70px;background:#f7f1ea} #works .content-making-layout{display:grid;grid-template-columns:minmax(330px,.88fr) minmax(330px,1.12fr);gap:clamp(48px,8vw,124px);width:min(1120px,100%);min-height:calc(100vh - 186px);margin:0 auto;align-items:start} #works .content-making-copy{max-width:510px;padding-top:8px;color:#3b332d} #works .content-making-eyebrow{color:#b8382e;font-size:10px;letter-spacing:.22em} #works .content-making-copy h2{margin:17px 0 24px;font-size:clamp(50px,6.4vw,88px);font-weight:500;line-height:.92;letter-spacing:-.08em} #works .content-making-lead,#works .content-making-method{margin:0;color:#6f6259;font-size:13px;line-height:1.9;letter-spacing:.035em} #works .content-making-method{margin-top:24px} #works .content-account-strategy{margin-top:30px;color:#51473f;font-size:13px;line-height:1.9;letter-spacing:.025em} #works .content-account-strategy p{margin:0} #works .content-account-strategy p+p{margin-top:13px} #works .content-account-strategy b{color:#b8382e;font-weight:500} #works .content-account-strategy .content-account-outcome{margin-top:13px;color:#51473f} #works .content-account-strategy .content-strategy-result{margin-top:20px;color:#6f6259;font-size:12px;line-height:1.9} #works .content-making-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:30px 0 0;border-top:1px solid #cdbfb4;border-left:1px solid #cdbfb4} #works .content-making-metrics div{padding:17px 18px;border-right:1px solid #cdbfb4;border-bottom:1px solid #cdbfb4} #works .content-making-metrics b{display:block;color:#b8382e;font-size:23px;font-weight:500;line-height:1.1;letter-spacing:-.04em} #works .content-making-metrics small{display:block;margin-top:7px;color:#81736a;font-size:9px;letter-spacing:.08em} #works .content-profile-link{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;padding:13px 0 11px;color:#b8382e;text-decoration:none;border-top:1px solid #b8382e55;border-bottom:1px solid #b8382e55} #works .content-profile-link span{display:flex;flex-direction:column;gap:3px} #works .content-profile-link small{font-size:8px;letter-spacing:.15em} #works .content-profile-link strong{font-size:11px;font-weight:500;letter-spacing:.06em} #works .content-profile-link b{font-size:10px;font-weight:400;letter-spacing:.1em;white-space:nowrap;transition:transform .3s ease} #works .content-profile-link:hover b{transform:translate(4px,-3px)} #works .content-print-stage{position:relative;width:min(420px,100%);height:675px;margin:52px auto 0;align-self:start} #works .content-printer{position:absolute;z-index:4;top:0;left:50%;width:84%;height:54px;padding:12px 16px;transform:translateX(-50%);border:1px solid #bdafa4;border-radius:8px;background:#e8ded5;box-shadow:0 12px 24px #4d39301c, inset 0 1px #fff} #works .content-printer span{display:block;height:17px;border-radius:3px;background:#302924;box-shadow:inset 0 3px 7px #0008} #works .content-print-window{position:absolute;z-index:2;top:43px;left:50%;width:78%;height:0;overflow:hidden;transform:translateX(-50%);filter:drop-shadow(0 22px 22px #4d393024)} #works .content-print-strip{padding:10px 10px 18px;background:#fffdf8;transform:translateY(-48px)} #works .content-polaroid{position:relative;display:grid;grid-template-columns:42% 1fr;gap:12px;min-height:142px;padding:10px;border-bottom:1px solid #ddd3c9;color:#473e37;text-decoration:none;background:#fffdf8;opacity:0;transform:translateY(-18px);transition:background .25s ease} #works .content-polaroid:last-child{border-bottom:0} #works .content-polaroid:hover{background:#f4ebe4} #works .content-polaroid img{width:100%;height:122px;display:block;object-fit:cover;object-position:center 18%;filter:saturate(.88) contrast(.96)} #works .content-polaroid>span{display:flex;min-width:0;flex-direction:column;padding:8px 4px 5px} #works .content-polaroid small{color:#b8382e;font-size:8px;line-height:1.5;letter-spacing:.08em} #works .content-polaroid strong{margin-top:11px;font-size:14px;font-weight:500;line-height:1.55;letter-spacing:.025em} #works .content-polaroid i{margin-top:auto;color:#8b7d73;font-size:8px;font-style:normal;letter-spacing:.16em} #works .content-print-hint{position:absolute;left:0;right:0;bottom:5px;margin:0;text-align:center;color:#93867c;font-size:8px;letter-spacing:.16em;opacity:0} #works .works-axis-stage.is-content-open .content-print-window{animation:content-strip-window 3.45s cubic-bezier(.2,.72,.18,1) .35s both} #works .works-axis-stage.is-content-open .content-print-strip{animation:content-strip-paper 3.45s cubic-bezier(.2,.72,.18,1) .35s both} #works .works-axis-stage.is-content-open .content-polaroid{animation:content-frame-reveal .55s cubic-bezier(.22,1,.36,1) both} #works .works-axis-stage.is-content-open .content-polaroid:nth-child(1){animation-delay:.45s} #works .works-axis-stage.is-content-open .content-polaroid:nth-child(2){animation-delay:1.15s} #works .works-axis-stage.is-content-open .content-polaroid:nth-child(3){animation-delay:1.85s} #works .works-axis-stage.is-content-open .content-polaroid:nth-child(4){animation-delay:2.55s} #works .works-axis-stage.is-content-open .content-print-hint{animation:content-hint-in .45s ease 3.85s both} @keyframes content-strip-window{0%{height:0}100%{height:610px}} @keyframes content-strip-paper{0%{transform:translateY(-48px)}100%{transform:translateY(0)}} @keyframes content-frame-reveal{0%{opacity:0;transform:translateY(-18px)}100%{opacity:1;transform:translateY(0)}} @keyframes content-hint-in{to{opacity:1}} @media(max-width:800px){#works .works-content-detail{padding:92px 20px 64px}#works .content-making-layout{display:flex;min-height:0;flex-direction:column;gap:54px;align-items:stretch}#works .content-making-copy{max-width:none;padding-top:0}#works .content-making-copy h2{font-size:54px}#works .content-print-stage{width:min(390px,100%);height:675px;margin:0 auto;flex:none}} @media(prefers-reduced-motion:reduce){#works .content-print-window{height:610px!important}#works .content-print-strip{transform:none!important}#works .content-polaroid,#works .content-print-hint{opacity:1!important;transform:none!important;animation:none!important}#works .works-axis-stage.is-content-open .content-print-window,#works .works-axis-stage.is-content-open .content-print-strip{animation:none!important}} #works .project-envelope-hint{position:absolute;left:50%;bottom:clamp(24px,5vh,48px);z-index:8;margin:0;transform:translateX(-50%);color:#8b7f75;font-size:9px;letter-spacing:.18em;white-space:nowrap} /* Works card fronts: one continuous paper texture with centered captions. */ #works .works-axis-front{display:block;background:transparent;text-align:center;isolation:isolate} #works .works-axis-front .axis-paper-texture{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(.97)} #works .works-axis-front .axis-ornament{position:absolute;z-index:1;left:50%;top:43%;display:grid;width:82%;height:64%;place-items:center;overflow:hidden;transform:translate(-50%,-50%);pointer-events:none} #works .works-axis-front .axis-ornament img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:.74;filter:saturate(.62) contrast(.96)} #works .works-axis-front .axis-ornament-1{width:72%;height:58%} #works .works-axis-front .axis-ornament-2{width:58%;height:68%} #works .works-axis-front .axis-ornament-3{width:64%;height:68%} #works .works-axis-front .axis-ornament-4{width:82%;height:54%} #works .works-axis-front .axis-label,#works .works-axis-front strong,#works .works-axis-front i{position:absolute;z-index:2;left:0;width:100%;margin:0;padding:0 12px;text-align:center} #works .works-axis-front .axis-label{bottom:54px;color:#766d64;font-size:8px;letter-spacing:.2em} #works .works-axis-front strong{bottom:28px;color:#3d3731;font-size:17px;font-weight:500;letter-spacing:.05em} #works .works-axis-front i{right:auto;bottom:12px;color:#8d8275;font-size:7px;font-style:normal;letter-spacing:.18em} @media(max-width:700px){ #works .works-axis-front .axis-label{bottom:44px;font-size:7px} #works .works-axis-front strong{bottom:23px;margin:0;font-size:14px} #works .works-axis-front i{bottom:9px;font-size:6px} }