:root{--wall:#EDECE8;--ink:#1B1F24;--soft:#5E646B;--line:#D5D3CC;--card:#FAFAF8;--accent:#2F4B7C;--hot:#9A3B2E}
*{box-sizing:border-box}
body{margin:0;background:var(--wall);color:var(--ink);font:16px/1.5 'Hanken Grotesk',system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;max-width:1240px;margin:0 auto;padding:22px 24px 0}
.brand{font:400 26px 'Instrument Serif',serif;text-decoration:none}
nav{display:flex;gap:20px}
nav a{text-decoration:none;color:var(--soft);padding:4px 0;border-bottom:2px solid transparent}
nav a[aria-current]{color:var(--ink);border-color:var(--ink)}
main{max-width:1240px;margin:0 auto;padding:8px 24px 56px}
.hero{padding:36px 0 20px}
h1{font:400 clamp(32px,5vw,52px)/1.08 'Instrument Serif',serif;margin:0 0 8px}
.hero p{margin:0;color:var(--soft);max-width:56ch}
.bar{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px}
.bar input,.bar select{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
.bar input{flex:1 1 220px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chips button{font:inherit;font-size:14px;padding:6px 13px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--ink);cursor:pointer}
.chips button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips span{color:var(--soft);margin-left:4px;font-size:12px}
.chips button[aria-pressed=true] span{color:#cfd3d8}
.count{color:var(--soft);font-size:14px;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px 22px;align-items:end}
.card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:14px;padding:12px 12px 0}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.frame{position:relative;display:block;background:#fff;aspect-ratio:3/2;overflow:hidden;box-shadow:0 0 0 5px #fff,0 14px 16px -8px rgba(27,31,36,.4)}
.frame.vertical{aspect-ratio:2/3;width:72%;margin:0 auto}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:100%;height:100%;display:grid;place-items:center;padding:12px;text-align:center;font:400 18px 'Instrument Serif',serif;color:var(--soft);background:#d9dbd5}
.seam{position:absolute;inset:0;pointer-events:none}
.p2 .seam{background:linear-gradient(90deg,transparent calc(50% - 2px),var(--wall) calc(50% - 2px) calc(50% + 2px),transparent 0)}
.p3 .seam{background:linear-gradient(90deg,transparent calc(33.33% - 2px),var(--wall) calc(33.33% - 2px) calc(33.33% + 2px),transparent 0),linear-gradient(90deg,transparent calc(66.66% - 2px),var(--wall) calc(66.66% - 2px) calc(66.66% + 2px),transparent 0)}
.hot{position:absolute;top:8px;left:8px;z-index:1;background:var(--hot);color:#fff;font:600 12px 'Hanken Grotesk',sans-serif;padding:2px 9px;border-radius:99px;font-style:normal}
.meta{display:flex;flex-direction:column;gap:2px;padding-bottom:6px}
.t{font-weight:500;font-size:15px;line-height:1.3}
.s{color:var(--soft);font-size:13px}
.from{font-size:13px;color:var(--accent);font-weight:600}
.more{display:flex;justify-content:center;margin-top:34px}
.more button,.btn{font:inherit;font-weight:600;background:var(--ink);color:#fff;border:0;border-radius:6px;padding:11px 24px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.wa{background:#1F7A4D}
.note{padding:40px 0;color:var(--soft)}
dialog{border:0;border-radius:10px;padding:0;width:min(860px,94vw);background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(27,31,36,.6)}
.dl{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:34px 30px 28px;align-items:center}
.x{position:absolute;top:8px;right:12px;font-size:28px;line-height:1;background:none;border:0;cursor:pointer;color:var(--soft)}
.dl h2{font:400 28px/1.15 'Instrument Serif',serif;margin:0 0 6px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.tags span{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:2px 10px;color:var(--soft)}
.sz{list-style:none;margin:0 0 18px;padding:0}
.sz li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.sec{margin:34px 0 0}
.sec h2{font:400 30px 'Instrument Serif',serif;margin:0}
.sec>p{margin:2px 0 14px;color:var(--soft)}
.row{display:grid;grid-template-columns:minmax(150px,1.2fr) 1fr 1fr;gap:16px;align-items:end;padding:18px 0;border-top:1px solid var(--line)}
.pns{display:flex;gap:6px;align-items:flex-end}
.pn{width:calc(var(--w)*3px);height:calc(var(--h)*3px);background:#fff;box-shadow:0 0 0 3px #fff,0 8px 10px -6px rgba(27,31,36,.4)}
.row b{font-weight:600;font-size:18px}
.row .pr{font-weight:600;color:var(--accent)}
.row .pr.est{color:var(--soft);font-weight:400}
footer{max-width:1240px;margin:0 auto;padding:22px 24px 40px;border-top:1px solid var(--line);color:var(--soft);font-size:14px}
@media(max-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 12px}.dl{grid-template-columns:1fr}.row{grid-template-columns:1fr 1fr}.pns{grid-column:1/-1}}