.demo-portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px 30px}.demo-project{min-width:0}.demo-card-meta{display:flex;justify-content:space-between;gap:15px;padding:0 0 14px;font-size:8px;letter-spacing:.16em;color:#82653d}.demo-card-image{position:relative;display:block;padding:28px 25px;background:#ddd6c8;overflow:hidden;min-width:0}.mini-browser{border:1px solid #52605244;border-radius:3px;background:#fbf8ef;box-shadow:8px 15px 25px #26362620;overflow:hidden;transition:transform .35s}.demo-card-image:hover .mini-browser{transform:translateY(-5px)}.mini-browser-bar{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:#f4f1e9;border-bottom:1px solid #23382d22;color:#4b5f52;font-size:7px;letter-spacing:.06em}.mini-browser-bar span:first-child{font-size:6px;letter-spacing:2px;color:#8d9c8f}.demo-viewport{position:relative;aspect-ratio:1.5;overflow:hidden}.demo-viewport img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:left top;pointer-events:none}.demo-open-icon{position:absolute;bottom:12px;right:12px;width:40px;height:40px;background:#fcf7ed;border:1px solid #ad9c7c;display:grid;place-items:center;font-size:24px;color:#173348;border-radius:50%}.demo-card-caption{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:20px}.demo-card-caption h3{font:normal 29px/1.2 Georgia,serif;margin:0 0 8px;letter-spacing:-.03em}.demo-card-caption p{font-size:10px;color:#68747b;margin:0;line-height:1.7}.demo-card-caption>a{font-size:10px;white-space:nowrap;padding:13px 0;border-bottom:1px solid #9a7d4d}.tone-coast{background:#b9d1d4}.tone-ritual{background:#e5cbb1}.tone-aurel{background:#2d3b31}.tone-table{background:#d8b58a}.tone-still{background:#cfdbc6}.tone-north{background:#b8c9d0}.tone-flow{background:#d6e0ca}.work-section .work-footnote{max-width:850px;margin-top:42px}
@media(max-width:850px){.demo-portfolio-grid{gap:40px 20px}.demo-card-image{padding:20px 17px}.demo-card-caption{align-items:flex-start;gap:15px}.demo-card-caption h3{font-size:25px}.demo-card-caption>a{font-size:9px}.demo-open-icon{width:35px;height:35px;font-size:21px}.mini-browser-bar{font-size:6px;padding:8px}}
@media(max-width:600px){.demo-portfolio-grid{grid-template-columns:1fr;gap:40px}.demo-card-image{padding:25px 20px}.demo-viewport{aspect-ratio:1.25}.demo-card-caption h3{font-size:28px}.demo-card-caption>a{font-size:10px}.demo-card-meta{font-size:8px}.demo-card-caption p{font-size:10px}.mini-browser-bar{font-size:7px;padding:10px}}
@media(prefers-reduced-motion:reduce){.mini-browser{transition:none}.demo-card-image:hover .mini-browser{transform:none}}