*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#333;background-color:#fafafa}a{color:#0070f3;text-decoration:none}a:hover{text-decoration:underline}.container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.header{text-align:center;margin-bottom:3rem}.header h1{font-size:2.5rem;margin-bottom:.5rem;color:#111}.header p{font-size:1.1rem;color:#666}.sort-bar{display:flex;justify-content:flex-end;margin-bottom:1rem}.sort-options{display:flex;gap:2px;background:#e1e5e9;border-radius:6px;padding:2px}.sort-option{padding:.35rem .75rem;font-size:.8rem;font-weight:500;color:#666;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .15s ease}.sort-option:hover{color:#333}.sort-option.active{background:#fff;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.08)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:1.5rem;gap:1.5rem;margin-bottom:2rem}.project-card{position:relative;background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .2s ease,box-shadow .2s ease;border:1px solid #e1e5e9;overflow:hidden}.project-card.has-image{padding-right:calc(33.333% + 1rem)}.project-image{position:absolute;top:0;right:0;bottom:0;width:33.333%;overflow:hidden;border-left:1px solid #e1e5e9}.project-image img{width:100%;height:100%;object-fit:cover;object-position:center}.project-image.panning img{animation:pan-image 8s ease-in-out infinite alternate}@keyframes pan-image{0%{object-position:left center}to{object-position:right center}}.project-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.15)}.project-title{font-family:BBH Bogle,system-ui,sans-serif;font-size:1.25rem;font-weight:700;margin-bottom:.5rem;color:#111}.project-description{color:#666;margin-bottom:1rem;line-height:1.5}.project-url{font-size:.9rem;color:#0070f3;word-break:break-all}.project-meta{margin-top:1rem;font-size:.85rem;color:#888}.error-banner{background:#fee;border:1px solid #fcc;border-radius:6px;padding:1rem;margin-bottom:2rem;color:#c33}.loading{padding:2rem}.empty-state,.loading{text-align:center;color:#666}.empty-state{padding:3rem 1rem}.empty-state h2{margin-bottom:.5rem;color:#333}@media (max-width:768px){.projects-grid{grid-template-columns:1fr}.header h1{font-size:2rem}.container{padding:1rem}}