.website-project{cursor:pointer}
.website-cover{position:relative;overflow:hidden;background:#171229}
.website-cover::before{content:"";position:absolute;inset:-8%;background:url("assets/websites/beauty-cover.jpg") center/cover;filter:blur(28px);opacity:.45;transform:scale(1.15)}
.website-cover img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.website-project.is-active .website-cover::after{content:"OPEN ↗";position:absolute;z-index:2;right:28px;bottom:25px;color:#bc91ff;font-size:11px;font-weight:700;letter-spacing:.22em}
.website-modal{position:fixed;inset:0;z-index:200;overflow-y:auto;background:#070513;color:#f7f4ff;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.website-modal.open{opacity:1;visibility:visible}
.website-view{min-height:100%;padding-bottom:80px}
.website-full-image{width:min(1120px,calc(100% - 64px));margin:50px auto 0;border:1px solid rgba(154,99,255,.25);border-radius:22px;overflow:hidden;background:#0d091d;box-shadow:0 30px 90px rgba(37,18,82,.38)}
.website-full-image img{display:block;width:100%;height:auto}
.website-next-work{width:min(1120px,calc(100% - 64px));margin:42px auto 0}
@media(max-width:760px){
  .website-full-image{width:calc(100% - 24px);margin-top:22px;border-radius:12px}
  .website-next-work{width:calc(100% - 24px);margin-top:24px}
  .website-project-switcher{display:flex;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:none}
  .website-project-switcher::-webkit-scrollbar{display:none}
  .website-project-switcher button{flex:0 0 auto;min-height:46px}
}