:root{--ink:#172526;--cream:#f4f1e9;--lime:#d9f76b;--line:#d2d2c7}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Apple SD Gothic Neo','Noto Sans KR',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #617b14;outline-offset:6px}.review{padding:9px 4.5%;background:var(--ink);color:var(--cream);font-size:10px;letter-spacing:1px;display:flex;justify-content:space-between;gap:15px}.review span{letter-spacing:0}header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:24px 4.5%;background:rgba(244,241,233,.96);border-bottom:1px solid var(--line);gap:24px}.logo{font:normal 34px 'Times New Roman',serif;letter-spacing:-1px}nav{display:flex;gap:34px;font-size:13px}.nav-cta{font-size:13px;display:flex;gap:25px;align-items:center}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:660px}.hero-copy{padding:70px 7% 28px 9%;display:flex;align-items:flex-start;flex-direction:column}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:500;margin:0 0 30px}h1{font-size:clamp(46px,5.4vw,84px);line-height:1.17;letter-spacing:-.055em;font-weight:500;margin:18px 0 28px}h1 em{font-style:normal;position:relative}h1 em:after{content:'';display:block;position:absolute;bottom:-10px;left:0;width:100%;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;animation:underline 1s .4s forwards}.intro{font-size:15px;line-height:1.9;color:#59625c;margin:0 0 35px}.button{display:flex;align-items:center;gap:50px;padding:17px 24px;background:var(--ink);color:var(--cream);font-size:13px;transition:background .2s,transform .2s}.button:hover{background:#334f4c;transform:translateY(-2px)}.hero-bottom{margin-top:auto;padding-top:65px;width:100%;display:flex;justify-content:space-between;gap:15px;font-size:10px}.hero-bottom span:last-child{font-size:8px;letter-spacing:1px}.portraits{display:flex;gap:6px;padding:28px 24px 28px 0;position:relative;overflow:hidden}.portrait{margin:0;position:relative;width:50%;overflow:hidden;background:#c6bdad}.portrait.woman{margin-top:62px}.portrait.man{margin-bottom:62px}.portrait img{height:100%;width:100%;object-fit:cover;object-position:57% center;transition:transform 1.2s}.portrait:hover img{transform:scale(1.04)}.portrait.woman img{object-position:40% center}.portrait figcaption{position:absolute;bottom:0;left:0;padding:60px 20px 22px;color:white;font-size:9px;letter-spacing:2px;width:100%;background:linear-gradient(transparent,#17252688)}.image-note{position:absolute;right:25px;bottom:8px;font-size:9px;color:#59625c}.manifesto{padding:125px 7%;display:grid;grid-template-columns:1fr 2fr auto;gap:45px;border-top:1px solid var(--line)}h2{font-size:clamp(30px,3.3vw,48px);line-height:1.4;font-weight:400;letter-spacing:-.045em;margin:0}.manifesto p:not(.eyebrow){font-size:15px;line-height:2;color:#59625c;margin:28px 0 0}.manifesto .eyebrow{padding-top:14px}.asterisk{font-size:90px;color:#738256;font-weight:300;line-height:1}.styles{padding:85px 7% 105px;background:#e7e8df}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.section-heading p:last-child{font-size:13px;color:#59625c}.filters{display:flex;gap:9px;margin:34px 0}.filters button{cursor:pointer;border:1px solid #a6afa2;padding:12px 22px;border-radius:30px;background:transparent;color:var(--ink);font-size:13px;transition:background .25s,color .25s}.filters button[aria-pressed=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}.look-panel{display:grid;grid-template-columns:1.1fr 1fr;min-height:540px;background:var(--cream)}.look-photo{position:relative;overflow:hidden;height:540px}.look-photo img{height:100%;width:100%;object-fit:cover;object-position:center 42%}.look-photo span{position:absolute;bottom:20px;left:24px;background:var(--cream);padding:10px 13px;font-size:9px;letter-spacing:1px}.look-copy{padding:60px 14%;align-self:center}.look-copy h3{font-size:38px;font-weight:400;line-height:1.35;letter-spacing:-1px;margin:0 0 24px}.look-copy>p:not(.eyebrow){font-size:14px;line-height:1.8}.swatches{display:flex;gap:10px;margin-top:28px}.swatches i{width:22px;height:22px;border-radius:50%;border:1px solid #0002}.swatches i:nth-child(1){background:#182535}.swatches i:nth-child(2){background:#eae4d4}.swatches i:nth-child(3){background:#51534f}.look-copy .color-label{font-size:10px!important;color:#677064}.look-tip{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}.look-foot{font-size:10px;color:#687260;display:block;margin-top:20px}.how{padding:110px 7%;display:grid;grid-template-columns:1fr 1fr;gap:70px}.how-sub{font-size:13px;color:#59625c;margin-top:25px}.how ol{padding:0;margin:0;list-style:none}.how li{display:flex;gap:26px;border-top:1px solid var(--line);padding:27px 0}.how li>span{font:italic 22px 'Times New Roman',serif}.how h3{margin:0 0 10px;font-weight:500;font-size:20px}.how li p{font-size:13px;color:#59625c;line-height:1.7;margin:0}.ending{text-align:center;padding:100px 24px;background:var(--ink);color:var(--cream)}.ending h2{font-size:clamp(40px,6vw,84px);margin:10px 0 40px}.ending .button{display:inline-flex;background:var(--lime);color:var(--ink)}footer{display:flex;align-items:center;gap:40px;padding:40px 7%}footer p{font-size:13px}footer>a:last-child{margin-left:auto;font-size:12px}.reveal{transition:opacity .7s,transform .7s}.motion-ready .reveal:not(.visible){opacity:0;transform:translateY(24px)}.look-copy.changing{animation:appear .5s ease}.hero-copy>*:not(.hero-bottom){animation:appear .8s both}@keyframes appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes underline{to{transform:scaleX(1)}}@media(min-width:1600px){main,header,footer{max-width:1800px;margin:auto}}@media(max-width:850px){header{padding:18px 5%}nav{gap:18px;font-size:11px}.nav-cta{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:45px 7% 30px}h1{font-size:60px}.hero-bottom{padding-top:35px}.portraits{height:480px;padding:10px 6% 30px}.portrait.man{margin-bottom:35px}.portrait.woman{margin-top:35px}.image-note{right:6%}.manifesto{padding:70px 7%;grid-template-columns:1fr;gap:15px}.manifesto .eyebrow{margin-bottom:10px}.asterisk{display:none}.section-heading{display:block}.styles{padding:60px 6%}.look-panel{grid-template-columns:1fr}.look-photo{height:400px}.look-copy{padding:38px 9%}.how{padding:70px 7%;grid-template-columns:1fr;gap:32px}.ending{padding:70px 20px}footer{gap:20px;flex-wrap:wrap}footer p{font-size:11px}.review{font-size:8px}.review span{max-width:220px;text-align:right}.filters{gap:6px}.filters button{padding:10px 14px;font-size:12px}}@media(max-width:380px){h1{font-size:49px}nav{gap:12px}.hero-bottom{font-size:9px}.hero-bottom span:last-child{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready .reveal:not(.visible){opacity:1;transform:none}h1 em:after{transform:none}}

/* Keep all navigation labels readable on narrow screens. */
@media(max-width:600px){header{flex-wrap:wrap;gap:12px;padding:15px 6%}header nav{order:2;width:100%;justify-content:space-between;gap:10px;font-size:12px}header nav a{white-space:nowrap}html{scroll-padding-top:125px}}
/* Motion direction: editorial opening, layered portraits, measured scroll rhythm. */
:root{--ease-editorial:cubic-bezier(.16,1,.3,1)}
header{backdrop-filter:blur(18px);position:sticky;gap:20px}
#motion-toggle{border:1px solid #bbc3b7;background:transparent;border-radius:30px;padding:8px 12px;color:var(--ink);font-size:12px;white-space:nowrap;cursor:pointer}
#motion-toggle:disabled{cursor:default;opacity:.75}
.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:#78974b;transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero{min-height:720px;overflow:hidden}
.hero-copy{padding-top:85px}
.hero-copy>*:not(.hero-bottom){animation:none}
.hero-copy>.eyebrow{animation:editorial-in 1s .08s both}
.title-mask{display:block;overflow:hidden;padding:0 .08em .18em 0;margin-bottom:-.06em}
.title-mask>span{display:block;animation:title-lift 1.35s var(--ease-editorial) both}
.title-mask:nth-child(2)>span{animation-delay:.18s}
h1 em:after{bottom:-7px;height:2px;animation-delay:.95s}
.hero-copy>.intro{animation:editorial-in 1s .45s both}
.hero-copy>.button{animation:editorial-in 1s .6s both}
.hero-bottom{animation:editorial-in 1s .8s both}
.portraits{gap:12px;padding-top:40px;padding-bottom:40px}
.portrait{animation:portrait-open 1.5s var(--ease-editorial) both}
.portrait.woman{animation-delay:.2s;margin-top:90px}
.portrait.man{margin-bottom:90px}
.portrait img{transform:scale(1.10);transition:filter .7s;will-change:auto}
.portrait:hover img{filter:saturate(1.08)}
.portrait figcaption{z-index:1;animation:editorial-in 1s .9s both}
.button{position:relative;overflow:hidden;transition:background .35s,box-shadow .35s,transform .35s}
.button:hover{box-shadow:0 12px 26px #17252620;transform:translateY(-3px)}
.button>span,.nav-cta>span{display:inline-block;transition:transform .4s var(--ease-editorial)}
.button:hover>span,.nav-cta:hover>span{transform:translate(4px,-4px)}
nav a{position:relative;padding:5px 0}
nav a:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-editorial)}
nav a:hover:after,nav a:focus-visible:after{transform:scaleX(1);transform-origin:left}
.style-ribbon{background:var(--ink);color:var(--cream);padding:23px 0;overflow:hidden}
.ribbon-track{display:flex;width:max-content;animation:ribbon-drift 32s linear infinite}
.ribbon-track>span{display:flex;align-items:center;white-space:nowrap;gap:42px;padding-right:42px;font-size:clamp(20px,2.5vw,36px);font-weight:300;letter-spacing:.03em}
.ribbon-track i{font-style:normal;color:var(--lime);font-size:25px}
.style-ribbon:hover .ribbon-track{animation-play-state:paused}
.reveal{transition:opacity 1s var(--ease-editorial),transform 1s var(--ease-editorial)}
.motion-ready .reveal:not(.visible){transform:translateY(45px)}
.manifesto.reveal.visible h2,.section-heading.reveal.visible h2{animation:editorial-in 1.1s var(--ease-editorial) both}
.manifesto.reveal.visible p:not(.eyebrow){animation:editorial-in 1.1s .12s var(--ease-editorial) both}
.how.reveal.visible li{animation:editorial-in .9s var(--ease-editorial) both}
.how.reveal.visible li:nth-child(2){animation-delay:.12s}.how.reveal.visible li:nth-child(3){animation-delay:.24s}
.how li{transition:padding-left .4s,background .4s}.how li:hover{padding-left:12px;background:#e8e9df}
.look-photo img{display:block}.look-photo .look-outgoing{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:cover;object-position:center 42%}
.look-photo>span{z-index:2}.look-copy.changing{animation:none}
.filters button{transition:background .3s,color .3s,transform .3s,box-shadow .3s}
.filters button:hover{transform:translateY(-2px);box-shadow:0 5px 12px #17252612}
.ending{padding:130px 24px;position:relative;overflow:hidden}
.ending.reveal.visible h2{animation:editorial-in 1.1s var(--ease-editorial) both}
.ending.reveal.visible .button{animation:editorial-in 1s .15s var(--ease-editorial) both}
@keyframes title-lift{from{transform:translateY(112%) rotate(2deg)}to{transform:translateY(0) rotate(0)}}
@keyframes portrait-open{from{clip-path:inset(100% 0 0 0);transform:translateY(35px)}to{clip-path:inset(0);transform:translateY(0)}}
@keyframes editorial-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@keyframes ribbon-drift{to{transform:translateX(-50%)}}
.page-hidden .ribbon-track{animation-play-state:paused}
@media(max-width:1100px){header .nav-cta{display:none}}
@media(max-width:850px){.hero{min-height:0}.hero-copy{padding-top:50px}.portraits{padding:10px 6% 30px;height:490px}.portrait.woman{margin-top:45px}.portrait.man{margin-bottom:45px}.ending{padding:85px 20px}}
@media(max-width:600px){header{justify-content:space-between}header nav{order:3;font-size:12px}#motion-toggle{margin-left:auto;font-size:12px}.portraits{height:400px;gap:8px}.style-ribbon{padding:18px 0}.ribbon-track>span{gap:24px;padding-right:24px}.look-photo{height:380px}.hero-copy .eyebrow{font-size:11px}.intro{font-size:16px}.hero-bottom{font-size:11px}}
body.motion-off *,body.motion-off *:before,body.motion-off *:after{animation:none!important;transition:none!important}
body.motion-off .title-mask>span,body.motion-off .portrait,body.motion-off .portrait img,body.motion-off .ribbon-track,body.motion-off .asterisk{transform:none!important;clip-path:none!important}
body.motion-off .reveal{opacity:1!important;transform:none!important}body.motion-off h1 em:after{transform:scaleX(1)}
html:has(body.motion-off){scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.title-mask>span,.portrait,.portrait img,.ribbon-track,.asterisk{transform:none!important;clip-path:none!important}.reveal{opacity:1!important;transform:none!important}*,*:before,*:after{animation:none!important;transition:none!important}}