/* Website examples use the shared site theme and their own preview layout. */
.project{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid #303239;border-radius:12px;overflow:hidden;background:#101113}
.project-art{min-height:310px;background:#12161b;display:flex;align-items:center;justify-content:center;padding:40px}
.project-sketch{border:1px solid #46505d;background:#07090b;width:100%;padding:20px;border-radius:7px;transform:perspective(700px) rotateY(8deg)}
.project-copy{padding:45px;align-self:center}
.project-copy h2{font-size:32px;margin-top:20px}
.project-copy p{font-size:13px}
.pill-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}
.pill{border:1px solid #353841;border-radius:5px;padding:5px 10px;font-size:10px;color:#a0a7b6}
.project-art.project-preview{display:block;align-self:stretch;min-height:0;padding:28px;background:#101216;position:relative;transition:background-color .2s ease}
.project-preview-frame{display:block;overflow:hidden;border:1px solid #3b404a;border-radius:8px;background:#08090a;box-shadow:0 18px 36px #0005;transition:border-color .2s ease,box-shadow .2s ease}
.project-preview-bar{display:flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-bottom:1px solid #2d3038;color:#8f96a6;font-size:9px}
.project-preview-bar i{width:5px;height:5px;border-radius:50%;background:#555c6b}
.project-preview-bar span{margin-left:8px}
.project-preview img{display:block;width:100%;height:auto;aspect-ratio:1440/1050;object-fit:cover;transition:filter .2s ease}
.project-preview-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;color:#c2c8d5;font-size:11px}
.project-preview-arrow{width:16px;height:16px;flex-shrink:0}
.windowbar i:nth-child(1),.project-preview-bar i:nth-child(1){background:#ff5f57}
.windowbar i:nth-child(2),.project-preview-bar i:nth-child(2){background:#febc2e}
.windowbar i:nth-child(3),.project-preview-bar i:nth-child(3){background:#28c840}
@media(hover:hover) and (pointer:fine){
  .windowbar i:hover,.project-preview-bar i:hover{filter:brightness(1.2);box-shadow:0 0 8px #ffffff30}
}
.project-preview:focus-visible{outline-offset:-4px}
.project-preview:focus-visible .project-preview-frame{border-color:#a0abc2;box-shadow:0 18px 36px #0005,0 0 22px #b5b9ff20}
.project-copy .project-visit{margin-top:24px}
.project-copy .project-status{font-size:11px;margin:14px 0 0}
@media(hover:hover) and (pointer:fine){
  .project-preview:hover{background-color:#191d26}
  .project-preview:hover .project-preview-frame{border-color:#a0abc2;box-shadow:0 18px 36px #0005,0 0 22px #b5b9ff20}
  .project-preview:hover img{filter:brightness(1.12)}
  .project-preview:hover .project-preview-caption{color:#fff}
}
@media(max-width:760px){.project-art.project-preview{padding:22px}.project:has(.project-preview){gap:0}}
@media(max-width:760px){.project{grid-template-columns:1fr;gap:30px}.project-art{min-height:240px}.project-copy{padding:28px}}