/* B selected by Yuka 2026-09-14: overlap in the index, separate screenshots in the detail. */
#works .works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
#works .work-device-image{aspect-ratio:1.4;border-radius:7px;background:linear-gradient(125deg,#f1e7e0,#f8f1ed 55%,#ecded6);isolation:isolate}
.portfolio-device-pair{display:block;position:absolute;left:19px;right:19px;top:50%;transform:translateY(-56%)}
.portfolio-laptop{display:block;width:88%;position:relative;padding-bottom:7px}
.portfolio-laptop-screen{display:block;border:4px solid #e1dfdc;border-radius:6px 6px 1px 1px;background:#e1dfdc;box-shadow:0 6px 16px #3f302f26;overflow:hidden}
.portfolio-browser-bar{height:10px;background:#f4f3f1;display:flex;align-items:center;gap:2px;padding:0 4px;position:relative}
.portfolio-browser-bar i{width:2px;height:2px;background:#c3bdb7;border-radius:100%}
.portfolio-browser-bar>span{position:absolute;left:36%;color:#8b817b;font:4px/1 Arial,sans-serif}
#works .portfolio-laptop img{width:100%;height:auto;aspect-ratio:1200/833;object-fit:contain;border:0;margin:0;transform:none}
.portfolio-laptop-base{display:block;height:6px;background:linear-gradient(#ecebe8,#b9b7b4);position:absolute;bottom:1px;width:108%;left:-4%;border-radius:1px 1px 65% 65%}
.portfolio-laptop-base:before{content:"";width:15%;height:2px;position:absolute;background:#b7b4b0;left:42.5%;border-radius:0 0 3px 3px}
.portfolio-phone{display:block;width:23%;padding:4px 3px 5px;border:1px solid #bfb9b2;background:#edebe7;border-radius:11px;position:absolute;right:0;bottom:-9px;box-shadow:0 7px 14px #45362c2b;overflow:hidden}
#works .portfolio-phone img{width:100%;height:auto;border:0;border-radius:7px;aspect-ratio:390/844;object-fit:contain;margin:0;transform:none}
.portfolio-speaker{display:block;height:2px;width:17%;margin:0 auto 3px;border-radius:3px;background:#aaa49e}
#works .work-device-image .work-image-hint{bottom:8px;right:12px;font-size:11px;line-height:1.3;gap:8px;padding:0;background:transparent;box-shadow:none;color:#785e58}
#works .work-device-image .work-image-hint>span{font-size:14px}
#works .work-info{padding-top:19px}#works .work-item h3{font-size:24px}
#works .work-description{font-size:15px;line-height:1.9;margin:13px 0 20px}
#works .work-actions{gap:12px}#works .work-actions .text-link{gap:10px}
.work-screen-pair{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,1fr);gap:28px;align-items:start;margin:24px 0 28px}
.work-screen-pair figure{min-width:0}.work-screen-pair figcaption{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:#805f59;margin-bottom:9px}
.work-screen-pair img{display:block;width:100%;height:auto;border:1px solid #ded5cf;box-shadow:0 6px 20px #503c2e0d}
.website-copy>h3{font-size:25px;margin:14px 0}.website-copy>p{font-size:16px}
@media(max-width:1099px) and (min-width:761px){#works .works-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
@media(max-width:760px){#works .works-grid{grid-template-columns:1fr;gap:42px}#works .work-item h3{font-size:23px}#works .work-description{font-size:15px}.portfolio-device-pair{left:17px;right:17px}.portfolio-browser-bar>span{font-size:3px}.work-screen-pair{grid-template-columns:1fr;gap:24px}.work-screen-pair figure:last-child{width:66%;margin-inline:auto}.website-copy>h3{font-size:23px}.website-copy>p{font-size:15px}}