.project-directory{background:#fbfaf8;color:#161616;padding:92px 0 66px}
.directory-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;font-size:10px;font-weight:600;letter-spacing:.025em;line-height:1.35}
.directory-top p{max-width:250px}
.directory-top>span{font-size:10px;font-weight:700;letter-spacing:.14em;white-space:nowrap}
.directory-layout{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(52px,10vw,180px);min-height:660px;padding:67px 0 70px}
.directory-preview{position:relative;width:100%;max-width:470px;aspect-ratio:1.39;justify-self:start;align-self:center;background:#e9e6e1;overflow:hidden}
.directory-preview-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateY(12px) scale(1.025);transition:opacity .52s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.directory-preview-image.is-active{opacity:1;transform:none}
.directory-preview-label{position:absolute;left:12px;bottom:12px;z-index:2;padding:6px 8px;background:rgba(12,12,12,.78);color:#fff;font-size:9px;font-weight:700;letter-spacing:.09em;line-height:1}
.directory-heading{display:flex;justify-content:space-between;align-items:baseline;gap:15px;padding-bottom:31px}
.directory-heading .eyebrow{color:#202020;font-size:10px;white-space:nowrap}
.directory-heading h2{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:-.025em;line-height:1.2}
.directory-heading h2 span{color:#8e8e8e}
.directory-list{list-style:none;margin:0;padding:0;border-top:1px solid #dfdfdd}
.directory-item{border-bottom:1px solid #dfdfdd}
.directory-link{position:relative;display:grid;grid-template-columns:39px minmax(0,1fr) 26px;grid-template-rows:auto 31px;column-gap:10px;align-items:baseline;min-height:92px;padding:11px 0 5px;color:#c3c3c1;transition:color .32s ease,border-color .32s ease}
.directory-link:before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:#202020;opacity:0;transition:opacity .3s ease}
.directory-link.is-active{color:#141414}
.directory-link.is-active:before{opacity:1}
.directory-number{align-self:start;padding-top:11px;font-size:10px;font-weight:700;letter-spacing:.08em}
.directory-title{min-width:0;font-family:var(--sans);font-size:clamp(40px,4.3vw,70px);font-weight:400;letter-spacing:-.065em;line-height:.95;white-space:nowrap}
.directory-arrow{align-self:center;font-family:var(--sans);font-size:20px;line-height:1;opacity:0;transform:translate(-6px,6px);transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.directory-link.is-active .directory-arrow{opacity:1;transform:none}
.directory-detail{grid-column:2/4;grid-row:2;align-self:start;min-width:0;padding-top:5px;overflow:hidden;color:#757575;font-size:10px;line-height:1.3;letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(5px);transition:opacity .28s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.directory-link.is-active .directory-detail{opacity:1;transform:none}
.directory-mobile-image{display:none}
.directory-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:36px}
.directory-bottom a{display:inline-flex;align-items:center;gap:26px;padding:7px 12px 7px 14px;border:1px solid #e4e3df;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;white-space:nowrap;transition:border-color .25s ease,background .25s ease}
.directory-bottom a:hover,.directory-bottom a:focus-visible{border-color:#161616;background:#fff}
.directory-bottom a span{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#161616;color:#fff;font-size:12px}
.directory-bottom>span{color:#7d7d7d;font-size:9px;font-weight:700;letter-spacing:.09em;text-align:right}
.directory-disclosure{padding-top:22px;border-top:1px solid #e8e7e4;color:#8b8b8b;font-size:10px;letter-spacing:.045em}
@media(max-width:1100px){.directory-layout{gap:6vw}.directory-title{font-size:clamp(38px,4.5vw,58px)}.directory-link{min-height:82px}}
@media(max-width:780px){.project-directory{padding:65px 0 54px}.directory-top{font-size:9px}.directory-top>span{font-size:9px}.directory-layout{display:block;min-height:0;padding:62px 0 62px}.directory-preview{display:none}.directory-heading{padding-bottom:22px}.directory-list{border-top-color:#d3d3d1}.directory-link{grid-template-columns:26px minmax(0,1fr) 84px;grid-template-rows:auto auto;column-gap:10px;align-items:center;min-height:103px;padding:14px 0;color:#171717}.directory-number{padding-top:4px}.directory-title{font-size:clamp(28px,5.4vw,43px);white-space:normal}.directory-arrow{display:none}.directory-detail,.directory-link.is-active .directory-detail{grid-column:2;grid-row:2;align-self:start;padding-top:8px;color:#777;font-size:9px;opacity:1;transform:none}.directory-mobile-image{display:block;grid-column:3;grid-row:1/3;width:84px;height:73px;object-fit:cover}.directory-link:before{display:none}.directory-bottom{margin-top:28px}.directory-bottom>span{display:none}}
@media(max-width:480px){.project-directory{padding-top:56px}.directory-top{display:block}.directory-top>span{display:block;margin-top:19px;color:#777}.directory-layout{padding-top:45px;padding-bottom:48px}.directory-heading h2{font-size:13px}.directory-link{grid-template-columns:23px minmax(0,1fr) 72px;min-height:96px}.directory-title{font-size:clamp(27px,7.1vw,34px)}.directory-mobile-image{width:72px;height:70px}.directory-detail{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.directory-preview-image,.directory-arrow,.directory-detail,.directory-link,.directory-link:before{transition:none;transform:none}}