@font-face{font-family:"GenSen";src:url("assets/GenSenRounded2TW-L.woff2") format("woff2");font-display:swap}@font-face{font-family:"Nyangi";src:url("assets/Cafe24Nyangi-B-v1.0.otf") format("opentype");font-display:swap}@font-face{font-family:"LineSeed";src:url("assets/LINESeedTW_TTF_Bd.ttf") format("truetype");font-display:swap}
:root{--paper:#f7f5e8;--sky:#a3b4dc;--mist:#5f719b;--peach:#e7bca7;--ink:#1b1b1b;--white:#fffdf7;--pad:clamp(20px,5vw,76px);--radius:28px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:"GenSen",system-ui,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}.skip-link{position:fixed;z-index:1000;top:8px;left:8px;transform:translateY(-160%);padding:10px 16px;background:#fff;border:2px solid var(--ink);border-radius:99px}.skip-link:focus{transform:none}:focus-visible{outline:3px solid var(--peach);outline-offset:4px}
.site-header{position:fixed;z-index:100;top:12px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:9px 12px 9px 18px;border:1px solid transparent;border-radius:999px;transition:background .35s,border-color .35s,box-shadow .35s}.site-header.is-scrolled,.site-header.is-open{background:rgba(247,245,232,.92);border-color:rgba(27,27,27,.13);box-shadow:0 10px 32px rgba(66,76,101,.12);backdrop-filter:blur(10px)}.brand{font-family:"LineSeed",sans-serif;font-size:.78rem;letter-spacing:.08em}.menu-button{display:grid;width:44px;height:44px;place-content:center;gap:6px;border:0;border-radius:50%;background:var(--ink);cursor:pointer}.menu-button span{display:block;width:18px;height:1px;background:var(--white);transition:transform .25s}.site-header.is-open .menu-button span:first-child{transform:translateY(3.5px) rotate(45deg)}.site-header.is-open .menu-button span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.site-nav{position:absolute;top:64px;left:0;right:0;display:grid;gap:4px;padding:10px;background:var(--paper);border:1px solid rgba(27,27,27,.12);border-radius:24px;box-shadow:0 18px 40px rgba(52,59,77,.14);opacity:0;pointer-events:none;transform:translateY(-8px);transition:.25s}.site-header.is-open .site-nav{opacity:1;pointer-events:auto;transform:none}.site-nav a{padding:12px 16px;border-radius:16px;font-weight:700}.site-nav a:active,.site-nav a:focus-visible{background:var(--sky)}
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--sky);padding:105px var(--pad) 36px;display:flex;flex-direction:column;justify-content:flex-end}.hero::after{content:"";position:absolute;inset:auto -20% -28% 28%;height:50%;background:radial-gradient(circle,var(--paper) 0 34%,transparent 35%);opacity:.18}.hero-wordmark{position:absolute;z-index:0;top:16%;left:50%;transform:translateX(-50%);width:108%;color:rgba(247,245,232,.72);font-family:"LineSeed",sans-serif;font-size:clamp(4.2rem,21vw,8rem);line-height:.73;letter-spacing:-.075em;text-align:center;white-space:nowrap}.hero-wordmark span{display:block}.hero-character-wrap{position:absolute;z-index:1;top:16%;left:50%;width:min(84vw,390px);transform:translateX(-50%);filter:drop-shadow(0 22px 18px rgba(54,57,68,.13))}.hero-character{width:100%;height:auto}.hero-copy{position:relative;z-index:3;max-width:430px}.eyebrow,.section-index{text-transform:uppercase;letter-spacing:.14em;font-family:"LineSeed",sans-serif;font-size:.7rem}.eyebrow{margin:0 0 4px}.hero h1{margin:0;font-family:"Nyangi","LineSeed",sans-serif;font-size:clamp(3.5rem,17vw,5.5rem);font-weight:400;line-height:.95;letter-spacing:-.045em}.hero-lead{max-width:360px;margin:14px 0 20px;font-size:.96rem}.hero-actions{display:flex;gap:9px}.button{display:inline-flex;align-items:center;justify-content:space-between;min-height:49px;padding:10px 17px;border:1px solid var(--ink);border-radius:999px;font-family:"LineSeed",sans-serif;font-size:.88rem}.button span{margin-left:14px}.button-primary{background:var(--ink);color:var(--paper)}.button-ghost{background:rgba(247,245,232,.24)}.scroll-note{display:none}.float-object{position:absolute;z-index:2;pointer-events:none}.float-video{top:24%;left:-18px;width:93px;height:72px;padding:10px;border:1.5px solid var(--ink);border-radius:13px;background:rgba(247,245,232,.75);transform:rotate(-7deg);animation:float 5s ease-in-out infinite}.float-video span:first-child{display:block;height:35px;border-radius:7px;background:var(--peach)}.float-video span:not(:first-child){display:inline-block;width:25px;height:4px;margin:8px 3px 0 0;border-radius:10px;background:var(--mist)}.float-timeline{top:35%;right:-26px;width:114px;height:58px;padding:12px 10px;border:1.5px solid var(--ink);border-radius:13px;background:var(--mist);transform:rotate(6deg);animation:float 6s -2s ease-in-out infinite}.float-timeline i{display:inline-block;width:18px;height:22px;margin-right:3px;border-radius:3px;background:var(--paper)}.float-timeline i:nth-child(2){height:30px;background:var(--peach)}.float-ring{top:13%;right:7%;width:38px;height:38px;border:9px solid var(--peach);border-radius:50%;animation:float 4.5s -1s ease-in-out infinite}@keyframes float{50%{translate:0 -10px;rotate:2deg}}
.hero-enter{opacity:0;transform:translateY(20px);animation:intro .75s cubic-bezier(.2,.75,.2,1) forwards}.hero-character-wrap.hero-enter{transform:translateX(-50%) translateY(24px)}.hero-enter-1{animation-delay:.1s}.hero-enter-2{animation-delay:.22s}.hero-enter-3{animation-delay:.36s}.hero-enter-4{animation-delay:.5s}.hero-enter-5{animation-delay:.64s}@keyframes intro{to{opacity:1;transform:translateY(0)}}@keyframes introCharacter{to{opacity:1;transform:translateX(-50%) translateY(0)}}.hero-character-wrap.hero-enter{animation-name:introCharacter}
.about{padding:76px var(--pad);background:var(--paper)}.section-index{margin:0 0 20px;color:var(--mist)}.about h2,.portfolio h2,.process h2,.contact h2{margin:0;font-family:"Nyangi","LineSeed",sans-serif;font-size:clamp(2.8rem,12vw,5.8rem);font-weight:400;line-height:1.04;letter-spacing:-.035em}.about-copy>div{margin-top:30px}.about-copy p{max-width:520px;margin:0 0 14px}.about-copy p:first-child{font-family:"LineSeed",sans-serif;font-size:1.08rem}.service-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}.service-tags span{padding:8px 15px;border:1px solid var(--mist);border-radius:999px;color:var(--mist);font-size:.82rem}
.portfolio{position:relative;height:650vh;background:var(--ink);color:var(--paper)}.portfolio-sticky{position:sticky;top:0;height:100svh;overflow:hidden;padding:78px 0 20px}.portfolio-head{position:relative;z-index:4;padding:0 var(--pad)}.portfolio .section-index{margin-bottom:3px;color:var(--sky)}.portfolio h2{font-size:clamp(2.8rem,12vw,5rem)}.portfolio-hint{position:absolute;right:var(--pad);bottom:4px;margin:0;color:#c9c8c0;font-size:.72rem}.work-stage{position:absolute;inset:185px 0 64px}.work-track{position:absolute;z-index:2;top:50%;left:0;display:flex;align-items:center;gap:18px;width:max-content;padding:0 max(24px,calc(50vw - 126px)) 0 calc(100vw + 24px);transform:translate3d(var(--track-x,0),-50%,0);will-change:transform}.work-card{--focus:0;display:block;width:min(66vw,272px);flex:0 0 auto;transform:rotate(calc(var(--tilt) * (1 - var(--focus)))) scale(calc(.92 + var(--focus) * .08));transform-origin:50% 60%;transition:transform .13s linear,filter .13s linear;filter:saturate(calc(.78 + var(--focus) * .22));outline-offset:8px}.work-image{display:block;aspect-ratio:9/14;overflow:hidden;border:1px solid rgba(247,245,232,.45);border-radius:22px;background:#e9e8dd;box-shadow:0 22px 50px rgba(0,0,0,.3)}.work-image img{width:100%;height:100%;object-fit:cover}.work-image.contain img{object-fit:contain}.work-meta{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-top:13px}.work-meta small{grid-column:1/-1;color:var(--sky);font-size:.64rem;letter-spacing:.08em}.work-meta strong{font-family:"LineSeed",sans-serif;font-size:.93rem}.work-meta i{font-style:normal;font-size:.7rem}.work-more{display:flex;width:min(66vw,272px);aspect-ratio:9/14;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--paper);border-radius:22px;background:var(--mist);text-align:center}.work-more span{font-size:.75rem}.work-more strong{font-family:"Nyangi",sans-serif;font-size:2rem;font-weight:400}.work-more i{margin-top:20px;font-size:2rem;font-style:normal}.work-character{position:absolute;z-index:1;right:-52px;bottom:-8%;width:230px;opacity:.8;transform:rotate(-4deg)}.work-progress{position:absolute;z-index:4;right:var(--pad);bottom:28px;left:var(--pad);height:3px;background:rgba(247,245,232,.18)}.work-progress span{display:block;width:100%;height:100%;background:var(--peach);transform:scaleX(var(--progress,0));transform-origin:left}
.process{position:relative;padding:88px var(--pad) 104px;background:var(--paper)}.process-heading>p:last-child{max-width:440px;margin:16px 0 0}.timeline{position:relative;margin-top:55px;padding-left:36px}.timeline-rail{position:absolute;top:0;bottom:0;left:7px;width:2px;background:rgba(95,113,155,.22)}.timeline-rail::before,.timeline-rail::after{content:"";position:absolute;left:50%;width:10px;height:10px;border:2px solid var(--mist);border-radius:50%;background:var(--paper);transform:translateX(-50%)}.timeline-rail::before{top:0}.timeline-rail::after{bottom:0}.timeline-rail span{position:absolute;top:0;left:50%;width:14px;height:14px;border-radius:50%;background:var(--peach);box-shadow:0 0 0 5px rgba(231,188,167,.25);transform:translate(-50%,-20%);translate:0 var(--playhead-y,0)}.process-list{display:grid;gap:18px;margin:0;padding:0;list-style:none}.process-list li{display:grid;grid-template-columns:50px 1fr;gap:10px;padding:22px 18px;border:1px solid rgba(95,113,155,.22);border-radius:22px;background:rgba(255,253,247,.5);opacity:.46;transform:translateX(8px);transition:.35s}.process-list li.is-active{opacity:1;transform:none;border-color:var(--mist);box-shadow:0 14px 36px rgba(95,113,155,.1)}.process-number{font-family:"Nyangi",sans-serif;font-size:1.8rem;color:var(--mist)}.process-list h3{margin:1px 0 5px;font-family:"LineSeed",sans-serif;font-size:1rem}.process-list p{margin:0;font-size:.86rem;color:#555}
.contact{position:relative;min-height:720px;overflow:hidden;padding:84px var(--pad) 390px;background:var(--mist);color:var(--paper)}.contact .section-index{color:var(--peach)}.contact-copy{position:relative;z-index:2}.contact-copy>p:not(.section-index){max-width:500px;margin:22px 0 30px}.contact-email{display:grid;grid-template-columns:1fr auto;gap:4px;padding:16px 0;border-top:1px solid rgba(247,245,232,.5);border-bottom:1px solid rgba(247,245,232,.5)}.contact-email span{grid-column:1/-1;color:#d8deec;font-size:.72rem}.contact-email strong{font-family:"LineSeed",sans-serif;font-size:clamp(.9rem,4vw,1.2rem)}.contact-email i{font-style:normal}.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.socials a{display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(247,245,232,.42);border-radius:999px;font-size:.75rem}.socials img{width:15px;height:15px;filter:brightness(0) invert(1)}.contact-character{position:absolute;z-index:1;right:50%;bottom:-105px;width:min(82vw,360px);transform:translateX(50%);filter:drop-shadow(0 24px 18px rgba(22,28,46,.15))}.site-footer{display:grid;gap:5px;padding:28px var(--pad);background:var(--ink);color:var(--paper);font-size:.7rem;text-align:center}.site-footer a{font-family:"LineSeed",sans-serif;font-size:.88rem}.site-footer p{margin:0;color:#aaa}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}.reveal.is-visible{opacity:1;transform:none}
@media(min-width:700px){.site-header{top:18px;left:var(--pad);right:var(--pad);padding-left:24px}.menu-button{display:none}.site-nav{position:static;display:flex;align-items:center;gap:2px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;opacity:1;pointer-events:auto;transform:none}.site-nav a{padding:7px 14px;font-size:.8rem}.site-nav .nav-contact{background:var(--ink);color:var(--paper);border-radius:999px}.hero{min-height:760px;padding-bottom:72px}.hero-wordmark{top:16%;font-size:clamp(7rem,15vw,13.5rem);line-height:.72}.hero-character-wrap{top:13%;width:min(47vw,470px)}.hero-copy{max-width:500px}.hero h1{font-size:clamp(5.4rem,10vw,8rem)}.hero-lead{font-size:1.04rem}.float-video{left:7%;top:31%;width:120px}.float-timeline{right:6%;top:42%;width:150px}.scroll-note{display:flex;position:absolute;z-index:3;right:var(--pad);bottom:42px;align-items:center;gap:10px;margin:0;font-size:.65rem;letter-spacing:.08em}.scroll-note span{width:42px;height:1px;background:var(--ink)}.about{padding-top:110px;padding-bottom:110px}.about-copy{display:grid;grid-template-columns:minmax(360px,1.2fr) minmax(280px,.8fr);gap:8vw;align-items:end}.about-copy>div{margin:0}.service-tags{justify-content:flex-end}.portfolio-sticky{padding-top:105px}.work-stage{inset:200px 0 72px}.work-track{gap:34px;padding-left:calc(100vw + 48px);padding-right:max(40px,calc(50vw - 155px))}.work-card,.work-more{width:min(28vw,310px)}.work-character{right:-15px;width:340px}.portfolio-hint{font-size:.76rem}.process{display:grid;grid-template-columns:.72fr 1fr;gap:8vw;padding-top:130px;padding-bottom:140px}.process-heading{position:sticky;top:120px;align-self:start}.timeline{margin-top:0}.contact{display:grid;grid-template-columns:minmax(420px,.95fr) minmax(340px,.75fr);min-height:720px;padding-top:110px;padding-bottom:100px}.contact-character{right:4%;bottom:-140px;width:min(38vw,430px);transform:none}.site-footer{grid-template-columns:1fr 1fr 1fr;text-align:left}.site-footer p:nth-child(2){text-align:center}.site-footer p:last-child{text-align:right}}
@media(min-width:1100px){.hero{min-height:100svh}.hero-wordmark{top:15%;width:100%;font-size:min(14vw,13rem)}.hero-wordmark span{display:inline}.hero-wordmark span+span{margin-left:.12em}.hero-character-wrap{top:10%;width:min(38vw,510px)}.hero-copy{max-width:560px}.about-copy{grid-template-columns:1.25fr .75fr}.portfolio-head{display:grid;grid-template-columns:1fr 1fr;align-items:end}.portfolio-head .section-index{grid-column:1/-1}.portfolio-hint{bottom:12px}.work-stage{inset:215px 0 68px}.contact-character{right:10%}}
@media(max-height:730px) and (max-width:699px){.hero{min-height:730px}.hero-character-wrap{top:13%;width:310px}.hero-wordmark{top:15%;font-size:4.4rem}.work-stage{inset:155px 0 52px}.portfolio-sticky{padding-top:68px}.portfolio h2{font-size:2.65rem}.work-card,.work-more{width:212px}.work-track{padding-left:calc(100vw + 18px);padding-right:calc(50vw - 106px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.hero-enter,.reveal{opacity:1;transform:none}.hero-character-wrap.hero-enter{transform:translateX(-50%)}.float-object{animation:none}.portfolio{height:auto;padding:90px 0 60px}.portfolio-sticky{position:relative;height:auto;overflow:visible;padding:0}.work-stage{position:relative;inset:auto;margin-top:30px}.work-track{position:relative;top:auto;display:grid;width:auto;padding:0 var(--pad);transform:none!important;grid-template-columns:repeat(2,minmax(0,1fr))}.work-card,.work-more{width:auto;transform:none!important}.work-character{display:none}.work-progress{display:none}.portfolio-hint{display:none}.process-list li{opacity:1;transform:none}.timeline-rail span{display:none}}@media(prefers-reduced-motion:reduce) and (min-width:900px){.work-track{grid-template-columns:repeat(3,minmax(0,1fr))}}