.projects-page{background:#222;min-height:100vh;padding-top:80px;padding-bottom:4rem}.projects-container{max-width:1200px;margin:0 auto;padding:0 2rem}.projects-header{text-align:center;margin-bottom:3rem;display:flex;flex-direction:column;align-items:center}.projects-title{font-size:2.5rem;font-weight:800;margin:0 auto 1rem;margin-top:30px;letter-spacing:.01em;background:linear-gradient(90deg,#78ccc4,#12b4a4);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.projects-subtitle{font-size:1.1rem;color:#677777;margin:0 auto;line-height:1.6;text-align:center!important;width:100%;display:block}.search-filter-section{margin-bottom:2rem;display:flex;justify-content:center;min-width:600px}.search-box{position:relative;max-width:500px;width:100%}.search-input{width:100%;padding:.75rem 2.5rem .75rem 1rem;border:1px solid #575757;background:#aaa;border-radius:8px;font-size:1rem;font-family:var(--font-sans);transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{outline:none;border-color:#76cfc5;box-shadow:0 0 0 3px #76cfc51a}.search-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:#575757;pointer-events:none}.tags-filter{margin-bottom:3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}.tags-label{font-weight:600;color:#677777;font-size:1rem}.tags-list{display:flex;flex-wrap:wrap;gap:.5rem}.tag-button{padding:.5rem 1rem;background:#575757;border:1px solid #424242;border-radius:20px;font-size:.9rem;font-weight:500;color:silver;cursor:pointer;transition:all .2s ease;font-family:var(--font-sans)}.tag-button:hover{background:#f7fafc;border-color:#cbd5e0;color:#2d3748}.tag-button.active{background:#0f887c;border-color:#76cfc5;color:#fff}.projects-list{display:flex;flex-direction:column;gap:3rem}.date-group{margin-bottom:2.5rem}.date-header{font-size:1.1rem;font-weight:600;color:#76cfc5;margin-bottom:1rem;text-align:center}.date-card{background:#aaa;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000000d;border:1px solid #424242}.project-item{margin-bottom:1.5rem;border-bottom:1px solid #424242;padding-bottom:1.5rem}.project-item:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}.project-summary{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;cursor:pointer;padding:.4rem 1rem;border-radius:8px;transition:background-color .2s ease;min-height:auto}.project-summary:hover{background-color:silver}.project-summary:hover{color:#424242}.title-icon-left{flex-shrink:0;width:20px;height:24px;opacity:.8;background:linear-gradient(135deg,#818181,#5e5e5e,#2e2e2e);-webkit-mask:url(/portfolio/svg/willow-decoration.svg) no-repeat center;-webkit-mask-size:contain;mask:url(/portfolio/svg/willow-decoration.svg) no-repeat center;mask-size:contain;transform:scaleX(-1);margin-right:.5rem}.project-title{font-size:1.1rem;font-weight:600;margin:0;flex:1;min-width:0;line-height:1.2;display:flex;align-items:center;gap:.5rem}.title-icon-right{flex-shrink:0;width:20px;height:24px;opacity:.8;background:linear-gradient(135deg,#818181,#5e5e5e,#2e2e2e);-webkit-mask:url(/portfolio/svg/willow-decoration.svg) no-repeat center;-webkit-mask-size:contain;mask:url(/portfolio/svg/willow-decoration.svg) no-repeat center;mask-size:contain;transform:scaleX(1);margin-left:.5rem}.project-title-link{color:#292929;text-decoration:none;text-align:center;text-wrap:balance;max-width:60%}.project-title-link:hover{color:#0f887c}.project-tags{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;max-width:40%}.project-tag{display:inline-block;padding:.2rem .6rem;background:#696969;color:silver;border-radius:12px;font-size:.8rem;font-weight:500}.project-toggle{background:none;border:none;cursor:pointer;padding:.25rem .5rem;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;flex-shrink:0;margin-left:auto}.project-toggle:hover{transform:scale(1.1)}.project-arrow{flex-shrink:0;width:20px;height:24px;opacity:.8;background:#292929;-webkit-mask:url(/portfolio/svg/triangle-down.svg) no-repeat center;-webkit-mask-size:contain;mask:url(/portfolio/svg/triangle-down.svg) no-repeat center;mask-size:contain;transform:scaleY(1);margin-right:.5rem}.project-item.expanded .project-arrow{transform:scaleY(-1)}.project-details{max-height:0;overflow:hidden;transition:max-height .3s ease,margin-top .3s ease,opacity .3s ease;margin-top:0;opacity:0}.project-item.expanded .project-details{max-height:200px;margin-top:1.5rem;opacity:1}.project-content-wrapper{display:flex;gap:2rem;align-items:stretch;margin-bottom:0;justify-content:space-between}.project-excerpt-wrapper{flex:0 0 70%;min-width:0;flex-direction:column;justify-content:space-between;padding-left:1rem}.project-excerpt{font-size:1.15rem;color:#424242;line-height:1.7;margin:0;max-width:100%;max-height:125px;overflow:hidden}.project-image-container{min-width:180px;max-width:330px;border-radius:8px;overflow:visible;background:transparent;display:flex;align-items:flex-start;justify-content:center;margin-left:auto;padding-top:0}.project-image{width:auto;height:150px;max-width:100%;object-fit:contain;display:block;margin:0}.project-footer{display:flex;align-items:center;gap:1.1rem;margin-top:30px;padding-top:0;border-top:none;padding-left:0}.project-read-more{color:#003530;text-decoration:none;font-weight:600;font-size:1.1rem;transition:color .2s ease}.project-read-more:hover{color:#0f887c}.project-read-time{font-size:1rem;color:#718096}@media(max-width:768px){.projects-page{padding-top:70px;padding-bottom:2rem}.projects-container{padding:0 1rem}.projects-title{font-size:2rem}.projects-subtitle{font-size:1rem}.tags-filter{flex-direction:column;align-items:flex-start}.project-item{padding:1rem}.project-title,.date-header{font-size:1.1rem}.project-footer{flex-direction:column;align-items:flex-start;gap:.5rem}.project-content-wrapper{flex-direction:column;gap:1rem}.project-image-container{width:100%;height:200px}.search-box{max-width:100%}}
