/* Compact, framed project cards. Devices use the original website captures. */
.device-showcase{--device-ink:#17372c;max-width:1140px;margin-inline:auto}
.device-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.device-project{display:flex;flex-direction:column;min-width:0;padding:10px;border:1px solid #ffffffc9;border-radius:18px;background:#f7faf6;box-shadow:0 8px 24px #17372c0a;scroll-margin-top:30px}
.device-stage{position:relative;display:block;aspect-ratio:1.75;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#e1eae7,#cbd9d2);text-decoration:none;isolation:isolate}
.device-stage-event{background:linear-gradient(135deg,#e8eae1,#d3dbca)}
.device-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:8%;height:9%;z-index:-1;background:#1c302529;filter:blur(16px);border-radius:50%}
.mockup-laptop{position:absolute;width:80%;left:3%;bottom:13%;filter:drop-shadow(0 6px 8px #1a30251a)}
.mockup-display{position:relative;display:block;margin:0 4.5%;padding:1.8% 1.1% 1.2%;border:1px solid #738078;border-radius:9px 9px 4px 4px;background:linear-gradient(145deg,#26332e,#131b18);box-shadow:inset 0 1px 0 #cbd4ce7a}
.mockup-display::before{content:"";position:absolute;top:1.25%;left:calc(50% - 1px);width:2px;height:2px;background:#617167;border-radius:50%}
.mockup-display img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:top;border-radius:2px}
.mockup-base{position:relative;display:block;height:6px;background:linear-gradient(#e8eeea 0%,#b5c0b9 45%,#87968e 85%);border-radius:1px 1px 50% 50%;box-shadow:0 2px 1px #1022191f}
.mockup-base::before{content:"";position:absolute;left:43%;right:43%;top:0;height:3px;border-radius:0 0 4px 4px;background:#8f9d94}
.mockup-phone{position:absolute;width:22%;right:5%;bottom:9%;padding:.7%;border:1px solid #89978e;border-radius:15px;background:#1b241f;box-shadow:inset 0 0 0 1px #c4cfc84d,0 9px 18px #1022192b;overflow:hidden}
.mockup-phone img{display:block;width:100%;height:auto;border-radius:11px}
.device-project-info{display:flex;flex-direction:column;flex:1;align-items:stretch;padding:23px 18px 9px;color:var(--device-ink)}
.device-project-info>div{flex:1}
.website-landing .device-project-info h3{margin:10px 0 12px;color:var(--device-ink);font-size:clamp(22px,2vw,27px);font-weight:550;line-height:1.2;letter-spacing:-.035em}
.device-project-info p{margin:0;color:#536f62;font-size:14px;line-height:1.65;max-width:38ch}
.device-project-info .project-credit{color:#5c7468;font-size:10px;font-weight:550;letter-spacing:.08em}
.device-project-link{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:50px;margin-top:24px;padding-top:12px;border-top:1px solid #315c491c;color:#244d40;font-size:13px;font-weight:550;text-decoration:none}
.website-landing .device-project-link svg{width:36px;height:36px;flex:0 0 36px;padding:9px;border:1px solid #315c4926;border-radius:8px;background:#eaf0ea;transition:background .2s,border-color .2s}
.device-project-link:hover svg{background:#dce9df;border-color:#315c4959}
.device-stage:focus-visible,.device-project-link:focus-visible{outline:2px solid #397162;outline-offset:3px}
@media(max-width:760px){.device-projects{grid-template-columns:1fr;gap:24px;max-width:560px;margin-inline:auto}.device-project-info{padding:22px 16px 8px}.website-landing .device-project-info h3{font-size:25px}}
@media(max-width:400px){.device-project{padding:8px;border-radius:16px}.device-project-info{padding-inline:12px}.website-landing .device-project-info h3{font-size:23px}.mockup-phone{border-radius:11px}.mockup-phone img{border-radius:7px}}
@media(prefers-reduced-motion:reduce){.device-project-link svg{transition:none}}