@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { color-scheme:light; --ink:#242424; --paper:#f7f5f0; --charcoal:#242424; --gold:#ffcd00; --line:#dad5cc; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.5 "DM Sans",system-ui,sans-serif; }
.wrap { width:min(1100px, calc(100% - 2rem)); margin:auto; }
header { background:#fff; border-bottom:3px solid var(--gold); }
.mast { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; gap:1rem; }
.mast a { display:block; min-width:0; }
.mast img { display:block; width:clamp(136px, 26vw, 224px); height:auto; }
.mast span { color:var(--ink); background:var(--gold); border-radius:.3rem; padding:.25rem .5rem; font-size:.8rem; font-weight:700; text-align:center; }
.intro { padding:clamp(2.5rem,8vw,6rem) 0 2.2rem; }
h1 { font:clamp(2.5rem,7vw,5.7rem)/.99 "Archivo Black",system-ui,sans-serif; letter-spacing:-.055em; margin:0; }
.intro p { font-size:clamp(1rem,2.2vw,1.25rem); margin-bottom:0; }
.filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; background:var(--charcoal); color:white; padding:1.2rem; border-radius:.8rem; }
label { display:grid; gap:.45rem; font-weight:700; }
select,input { width:100%; min-height:2.85rem; border:1px solid var(--line); border-radius:.4rem; padding:.5rem; background:white; color:var(--ink); font:inherit; }
.results-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 1rem; margin-top:1.6rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:1rem; padding-bottom:3rem; }
.card,#detail { background:#fffefa; border:1px solid var(--line); border-radius:.8rem; padding:1.2rem; }
.card h3 { margin:.35rem 0 .65rem; line-height:1.25; }
.card p { margin:.35rem 0; }
.platform { color:#595044; font-size:.86rem; font-weight:700; }
.price { font-weight:700; font-size:1.35rem; }
.button { display:inline-block; margin-top:.8rem; padding:.55rem .85rem; border-radius:.35rem; background:var(--gold); color:#242424; font-weight:700; text-decoration:none; }
#detail { max-width:700px; margin:2rem 0; }
:focus-visible { outline:3px solid #805600; outline-offset:3px; }
.filters :focus-visible { outline-color:var(--gold); }
@media(max-width:680px) { .filters { grid-template-columns:1fr; } }

[hidden] { display:none !important; }