/* Physical display panels: the work stays intact inside our studio's palette. */
.work-display{--shell:#762fff;--trim:#c4f12b;--panel-ink:#f1eee6;position:relative;background:var(--shell);color:var(--panel-ink);padding:20px 28px 18px;border:1px solid #ffffff35;border-radius:16px;isolation:isolate;overflow:hidden}
.display-lime{--shell:#c4f12b;--trim:#762fff;--panel-ink:#222229}.display-orange{--shell:#ff6b19;--trim:#222229;--panel-ink:#222229}.display-cyan{--shell:#20bbce;--trim:#762fff;--panel-ink:#222229}.display-graphite{--shell:#35313f;--trim:#c4f12b}
.work-display::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.work-display::after{content:'';position:absolute;inset:auto 0 0;height:6px;background:#0003}
.display-top,.display-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}
.display-top{font-size:9px;font-weight:700;letter-spacing:.06em;margin-bottom:24px;line-height:1.5}
.display-category{border:1px solid currentColor;padding:5px 9px;border-radius:3px;letter-spacing:0}
.work-screen{position:relative;width:92%;margin:0 auto;border:7px solid #222229;border-radius:9px;background:#222229;box-shadow:8px 10px 0 #17161d45;transform:rotate(-1deg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.display-lime .work-screen,.display-cyan .work-screen{transform:rotate(1deg)}
.screen-bar{height:23px;display:flex;align-items:center;gap:4px;padding:0 7px;color:#f1eee6;background:#222229;line-height:1}
.screen-bar>i{width:4px;height:4px;border-radius:50%;background:#c4f12b;flex-shrink:0}.screen-bar>i:nth-child(2){background:#ff6b19}.screen-bar>i:nth-child(3){background:#9565f8}
.screen-bar>span{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:8px;opacity:.7}.screen-bar>b{font-size:12px;margin-left:auto}
.work-screen>img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1200/750;object-fit:contain;border-radius:0 0 3px 3px;background:#222229;transform:none!important}
.display-bottom{margin-top:27px;min-height:40px}.display-mark{font-size:23px;font-weight:800;letter-spacing:-.15em;line-height:1;color:var(--trim)}
.display-action{display:inline-flex;align-items:center;gap:16px;background:#f1eee6;color:#222229;border-radius:999px;font-size:11px;font-weight:700;padding:8px 8px 8px 16px;min-height:40px;transition:background .2s}
.display-action>b{display:grid;place-items:center;width:27px;height:27px;background:#222229;color:#c4f12b;border-radius:50%;font-size:19px;line-height:1;font-weight:400}
.display-vents{font-size:10px;letter-spacing:2px;opacity:.65}.display-label{font-size:11px}
a:hover>.work-display .work-screen,a:focus-visible>.work-display .work-screen{transform:rotate(0deg) translateY(-3px)}
a:hover>.work-display .display-action{background:#c4f12b}
.work-image{aspect-ratio:auto;background:transparent;border-radius:16px;overflow:visible}.work-card:hover .work-image{transform:none}
.work-info{padding:18px 2px 0;gap:18px}.work-info .work-tag{display:none}.work-info h3{font-size:22px;line-height:1.15}.work-info p{margin-top:9px;line-height:1.4}
.home .case-visual{display:block;aspect-ratio:auto;background:none;overflow:visible}
.home .case-visual .work-screen img{transform:none}
.home .case-section{background:#232129;background-image:radial-gradient(ellipse at 85% 8%,#762fff22,transparent 45%)}
.home .portfolio-kicker{color:#c4f12b;margin-bottom:25px}.home .case-section .display-title{margin-bottom:28px;color:#f1eee6}
.portfolio-intro{max-width:510px;color:#bdb7c9;font-size:15px;line-height:1.6;margin:0 0 55px auto}
.home .case-item[open]>summary .case-index{color:#c4f12b}.home .case-item[open]>summary h3{color:#c4f12b}
.home .case-item>summary .case-plus{display:grid;place-items:center;border:1px solid #ffffff55;border-radius:50%;width:32px;height:32px;font-size:24px;line-height:1}
.home .case-description{gap:30px;margin-top:22px}.home .case-description>p{font-size:14px;max-width:550px;line-height:1.6}
.portfolio-all{margin-top:35px}.case-cover{overflow:visible;border-radius:0}.case-cover .work-display{max-width:1400px;margin-inline:auto;padding:25px 5%}
.case-cover .work-screen{max-width:1100px}.case-cover .display-top{font-size:11px}.case-cover .display-bottom{margin-top:35px}.case-cover .display-mark{font-size:32px}
.portfolio-page{background:#222129;color:#f1eee6}.portfolio-page .page-heading h1{font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(44px,6.7vw,110px);line-height:1.02;letter-spacing:-.06em}
.portfolio-page .page-heading h1 em{font-family:inherit;font-style:normal;color:#c4f12b}
.portfolio-page .page-heading{padding-top:40px;padding-bottom:65px}.portfolio-page .filter-buttons button{border-radius:6px;font-size:13px;min-height:44px;padding:12px 22px}
.portfolio-page .project-grid-section{background:linear-gradient(180deg,#762fff16,transparent 300px)}
.portfolio-page .work-grid{gap:50px 30px}.portfolio-detail .page-heading h1{font-size:clamp(42px,5vw,86px)}
.portfolio-page .work-info p{color:#c1bbca}
@media(min-width:1000px){.home .work-display{padding:24px 40px}.home .display-top{font-size:11px}.home .display-bottom{margin-top:30px}.home .display-action{font-size:13px}.home .work-screen{width:88%}}
@media(max-width:800px){.work-display{padding:16px 17px 15px;border-radius:11px}.display-top{margin-bottom:16px;font-size:8px;gap:8px}.display-category{font-size:8px;padding:4px 6px}.work-screen{width:95%;border-width:5px;box-shadow:5px 7px 0 #17161d45}.display-bottom{margin-top:22px;gap:12px}.display-action{font-size:10px;gap:10px;padding-left:12px}.display-vents{display:none}.display-mark{font-size:21px}.screen-bar{height:19px}.screen-bar>span{font-size:7px}.portfolio-page .work-grid{gap:35px 20px}.work-info h3{font-size:21px}.portfolio-intro{font-size:14px;margin-bottom:35px}.case-cover .work-display{padding:20px}.case-cover .display-top{font-size:9px}.portfolio-page .page-heading{padding-top:30px;padding-bottom:45px}}
@media(max-width:520px){.home .case-item>summary{grid-template-columns:20px minmax(0,1fr) 32px}.home .case-item h3{font-size:25px}.home .case-body{padding-bottom:25px}.home .case-description{margin-top:16px}.home .case-description p{font-size:13px}.home .case-description a{font-size:12px}.display-top{font-size:8px}.work-display{padding:15px 13px}.work-screen{width:96%}.portfolio-page .page-heading h1{font-size:45px}.portfolio-detail .page-heading h1{font-size:37px}.portfolio-intro{font-size:13px}.portfolio-all{font-size:13px}.case-cover .work-display{border-radius:0}.display-action{font-size:10px}.display-mark{font-size:20px}.work-info h3{font-size:22px}.work-info p{font-size:11px}.portfolio-page .filter-buttons{gap:7px}.portfolio-page .filter-buttons button{font-size:12px;padding:10px 14px}}
@media(prefers-reduced-motion:reduce){.work-screen,.display-action{transition:none}a:hover>.work-display .work-screen{transform:none}}