.work-detail{padding-bottom:6rem}.work-detail__header{padding:3rem 0}.work-detail__back{color:#6b7280;align-items:center;gap:.5rem;font-size:.875rem;transition:color .2s;display:inline-flex}.work-detail__back:hover{color:#7c3aed}.work-detail__hero{margin-bottom:3rem}.work-detail__hero-image{border-radius:1rem;height:400px;position:relative;overflow:hidden}@media (max-width:768px){.work-detail__hero-image{height:240px}}.work-detail__placeholder{color:#ffffff26;font-size:8rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.work-detail__hero-thumbnail{object-fit:cover;object-position:center}.work-detail__info{max-width:800px;margin-bottom:6rem}.work-detail__meta{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.work-detail__badge{letter-spacing:.04em;color:#7c3aed;background:#7c3aed14;border:1px solid #7c3aed2e;border-radius:999px;justify-content:center;align-items:center;padding:4px 10px;font-size:11px;font-weight:600;display:inline-flex}.work-detail__year{color:#6b7280;font-size:.875rem}.work-detail__title{color:#111;font-size:3rem;font-weight:700;line-height:1.1}@media (max-width:1024px){.work-detail__title{font-size:2.25rem}}@media (max-width:768px){.work-detail__title{font-size:1.875rem}}.work-detail__title{margin-bottom:1.5rem}.work-detail__desc{color:#6b7280;font-size:1.125rem;font-weight:400;line-height:1.6}.work-detail__overview{border-top:1px solid #e5e7eb;padding:4rem 0}.work-detail__overview .copy{margin-bottom:2rem}.work-detail__overview-text{color:#6b7280;max-width:800px;font-size:1.125rem;font-weight:400;line-height:1.8}.work-detail__built{border-top:1px solid #e5e7eb;padding:4rem 0}.work-detail__built .copy{margin-bottom:2rem}.work-detail__built-list{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (max-width:768px){.work-detail__built-list{grid-template-columns:1fr}}.work-detail__built-item{color:#111;background-color:#fff;border:1px solid #e5e7eb;border-radius:.75rem;align-items:center;gap:1rem;padding:1.5rem;font-size:1rem;display:flex}.work-detail__built-icon{color:#7c3aed;background-color:#7c3aed1a;border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.work-detail__tech{border-top:1px solid #e5e7eb;padding:4rem 0}.work-detail__tech .copy{margin-bottom:2rem}.work-detail__tech-list{flex-wrap:wrap;gap:.5rem;display:flex}.work-detail__tech-item{color:#111;background-color:#fff;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem 1.5rem;font-size:.875rem;font-weight:500}.work-detail__screenshots{border-top:1px solid #e5e7eb;padding:4rem 0}.work-detail__screenshots .copy{margin-bottom:2rem}.work-detail__screenshots-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;display:grid}@media (max-width:768px){.work-detail__screenshots-grid{grid-template-columns:1fr}}.work-detail__screenshot{aspect-ratio:1300/616;background-color:#fff;border:1px solid #e5e7eb;border-radius:1rem;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.work-detail__screenshot--featured{aspect-ratio:1300/616;grid-column:1/-1}.work-detail__screenshot-button{cursor:zoom-in;background:0 0;border:0;width:100%;height:100%;padding:0;display:block}.work-detail__screenshot-button:hover .work-detail__screenshot-image{transform:scale(1.03)}.work-detail__screenshot-button:focus-visible{outline-offset:-2px;outline:2px solid #7c3aed99}.work-detail__screenshot-image{object-fit:cover;object-position:center top;width:100%;height:100%;transition:transform .3s;display:block}.work-detail__screenshot-caption{pointer-events:none;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-color:#121416c7;border-radius:999px;padding:.25rem .5rem;font-size:.75rem;font-weight:600;position:absolute;bottom:1rem;left:1rem}.work-detail__cta{border-top:1px solid #e5e7eb;padding-top:4rem}.work-detail__cta-card{text-align:center;background:linear-gradient(135deg,#7c3aed 0%,#5512c8 100%);border-radius:1rem;padding:4rem}@media (max-width:768px){.work-detail__cta-card{padding:3rem 1.5rem}}.work-detail__cta-card .copy .title{color:#fff}.work-detail__cta-card .copy .desc{color:#ffffffe6;margin-left:auto;margin-right:auto}.work-detail__cta-card .copy .actions{justify-content:center}.work-detail__cta-card .btn-primary{color:#7c3aed;background-color:#fff}.work-detail__cta-card .btn-primary:hover{background-color:#ffffffe6}
