*{box-sizing:border-box}
body{margin:0;min-height:100vh;padding:20px 16px 64px;background-color:#1c7676;background-image:linear-gradient(rgba(0,0,0,.16) 2px,transparent 2px),linear-gradient(90deg,rgba(0,0,0,.16) 2px,transparent 2px);background-size:112px 112px;color:#111;font:14px/1.5 Tahoma,Verdana,sans-serif}
a{color:#0b2a6f}a:hover{color:#c9423a}
main{max-width:900px;margin:0 auto}
.window{background:#d6d0c4;border:2px solid;border-color:#f4f1ea #3d3a35 #3d3a35 #f4f1ea;box-shadow:2px 2px 0 #000,inset -1px -1px 0 #8a857c;padding:3px}
.window.wide{max-width:none}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 3px 3px 6px;background:linear-gradient(90deg,#0b2a6f,#6d95c9);color:#fff;font:bold 13px Tahoma,sans-serif}
.titlebar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x{flex:none;width:18px;height:16px;background:#d6d0c4;color:#000;font:bold 12px/14px Tahoma;text-align:center;text-decoration:none;border:1px solid;border-color:#fff #3d3a35 #3d3a35 #fff}
.btn{display:inline-block;padding:6px 14px;background:#d6d0c4;border:2px solid;border-color:#fff #3d3a35 #3d3a35 #fff;box-shadow:inset -1px -1px 0 #8a857c;font:13px Tahoma,sans-serif;color:#111;text-decoration:none;text-align:center}
.btn:hover{color:#111;background:#e4dfd5}
.btn:active{border-color:#3d3a35 #fff #fff #3d3a35}
.btn.buy{background:#c9423a;color:#fff;font:15px 'Bungee',sans-serif;letter-spacing:1px;border-color:#f08a80 #5a1510 #5a1510 #f08a80;box-shadow:1px 1px 0 #000}
.btn.buy:hover{background:#d9554d;color:#fff}

.piece{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;margin:8px 5px 5px;padding:18px;background:#fff;border:2px solid;border-color:#8a857c #fff #fff #8a857c}
.frame{display:block;align-self:start}
.frame img{display:block;width:auto;max-width:100%;height:auto;max-height:78vh;margin:0 auto;background:#f4ead2;border:1px solid #3d3a35;box-shadow:3px 3px 0 #3d3a35}
.info h1{margin:0 0 6px;font:28px/1.15 'Alfa Slab One',serif;color:#2b2b2b;overflow-wrap:break-word}
.info p{margin:0 0 12px;font-size:15px}
.info .facts{font-size:13px;color:#3d3a35;text-transform:uppercase;letter-spacing:.5px}
.info .medium{font-size:13px;color:#3d3a35}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.pager{display:flex;gap:6px;padding:5px}
.pager .btn{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.address{display:flex;align-items:center;gap:8px;padding:6px 5px;font-size:12px}
.address div{flex:1;min-width:0;padding:2px 6px;background:#fff;border:2px solid;border-color:#8a857c #fff #fff #8a857c}
.intro{margin:0 5px;padding:14px 16px 4px;background:#fff;border:2px solid;border-color:#8a857c #fff transparent #8a857c;border-bottom:none}
.intro h1{margin:0 0 4px;font:24px/1.15 'Alfa Slab One',serif;color:#2b2b2b}
.intro p{margin:0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 5px 5px;padding:16px;background:#fff;border:2px solid;border-color:#8a857c #fff #fff #8a857c;border-top:none}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;color:#111;text-decoration:none;font-size:12px;line-height:1.3;text-align:center}
.tile img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#f4ead2;border:1px solid #3d3a35;box-shadow:2px 2px 0 #3d3a35}
.tile:hover img{box-shadow:2px 2px 0 #c9423a;border-color:#c9423a}
.tile:hover span{background:#0b2a6f;color:#fff}
.tile span{padding:1px 4px}
.status{display:flex;gap:4px;padding:0 4px 4px;font-size:11px}
.status div{padding:2px 6px;border:1px solid;border-color:#8a857c #fff #fff #8a857c}
.status div:first-child{flex:1}

.taskbar{position:fixed;left:0;right:0;bottom:0;height:40px;display:flex;align-items:center;gap:6px;padding:0 6px;background:#d6d0c4;border-top:2px solid #f4f1ea;z-index:5}
.taskbar a{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;color:#111;text-decoration:none;font:13px Tahoma,sans-serif;white-space:nowrap}
.taskbar .start{font-weight:bold;border:2px solid;border-color:#fff #3d3a35 #3d3a35 #fff}
.taskbar .start img{object-fit:cover;border:1px solid #3d3a35}
.taskbar .task{border:1px solid;border-color:#8a857c #fff #fff #8a857c;min-width:0;overflow:hidden;text-overflow:ellipsis}

@media (max-width:700px){
body{padding:12px 10px 60px}
.piece{grid-template-columns:minmax(0,1fr);padding:12px;gap:14px}
.info h1{font-size:24px}
.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:10px}
.pager{flex-wrap:wrap}
.pager .btn{flex:1 1 40%}
.pager .btn:nth-child(2){order:3;flex-basis:100%}
.taskbar a{padding:0 7px;font-size:12px}
}

.shown{margin:0 5px 5px;padding:16px 18px;background:#fff;border:2px solid;border-color:#8a857c #fff #fff #8a857c}
.shown h2{margin:0 0 6px;font:18px/1.2 'Alfa Slab One',serif;color:#2b2b2b}
.shown p{margin:0 0 10px;font-size:14px}
.photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.photos figure{margin:0}
.photos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid #3d3a35;box-shadow:2px 2px 0 #3d3a35}
.photos figcaption{margin-top:6px;font-size:12px;color:#3d3a35}
@media (max-width:700px){.shown{padding:12px}.photos{grid-template-columns:minmax(0,1fr)}}