:root{
  --bg:#13110f; --bg2:#1b1815; --panel:#211d19; --line:#3a332c; --ink:#efe8dc; --ink2:#b9ae9e; --ink3:#a39684;
  --accent:#d8b46a; --accent2:#f0d79c; --chip:#2c2620; --chipOn:#d8b46a; --chipOnInk:#1a1610;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rowH:210px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f4efe6; --bg2:#ebe4d8; --panel:#fbf8f2; --line:#d9cfbf; --ink:#221d17; --ink2:#5b5145; --ink3:#675d50;
         --accent:#7a4f10; --accent2:#6b450e; --chip:#e7dfd1; --chipOn:#2a241c; --chipOnInk:#f4efe6; }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:10px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.logo{font-family:var(--serif);font-size:22px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.logo b{color:var(--accent);font-weight:400}
.searchwrap{position:relative;flex:1 1 320px;max-width:640px}
#q{width:100%;padding:10px 14px 10px 38px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:16px}
.searchwrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.6}
#suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:hidden;display:none;z-index:30}
#suggest.on{display:block}
#suggest button{display:flex;width:100%;text-align:left;gap:10px;padding:9px 14px;border:0;background:none;cursor:pointer;align-items:baseline}
#suggest button:hover,#suggest button.hl{background:var(--chip)}
#suggest .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);min-width:78px}
#suggest .n{margin-left:auto;color:var(--ink3);font-size:12px}
.tools{display:flex;gap:10px;align-items:center;margin-left:auto}
select,.btn{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--ink);cursor:pointer}
.btn.primary{background:var(--accent);color:var(--chipOnInk);border-color:var(--accent)}
#filtersBtn{display:none}
#chipsbar{display:flex;gap:8px;align-items:center;padding:10px 18px;flex-wrap:wrap;min-height:48px;border-bottom:1px solid var(--line)}
#count{color:var(--ink2);font-size:14px;margin-right:6px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;border:1px solid var(--line);background:var(--chip);cursor:pointer;font-size:13.5px;white-space:nowrap}
.chip.on{background:var(--chipOn);color:var(--chipOnInk);border-color:var(--chipOn)}
.chip .x{opacity:.75;font-size:15px;line-height:1}
.chip .c{color:var(--ink3);font-size:12px}
.chip.on .c{color:inherit;opacity:.7}
.clear{background:none;border:0;color:var(--accent);cursor:pointer;text-decoration:underline;font-size:13.5px}
main{display:grid;grid-template-columns:280px 1fr;min-height:70vh}
aside{border-right:1px solid var(--line);padding:6px 16px 60px;overflow:auto;max-height:calc(100vh - 110px);position:sticky;top:110px}
.grp{border-bottom:1px solid var(--line);padding:12px 0}
.grp h2{margin:0 0 8px;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.grp h2 .gbtn{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:28px;background:none;border:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;text-align:left}
.grp .vals{display:flex;flex-wrap:wrap;gap:6px}
.grp .more{background:none;border:0;color:var(--accent);cursor:pointer;font-size:13px;padding:4px 0}
.grp input.find{width:100%;margin:0 0 8px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
.grp .hint{color:var(--ink3);font-size:12px;margin:6px 0 0}
.slider{position:relative;height:30px;margin:8px 4px 2px}
.slider input{position:absolute;left:0;right:0;width:100%;pointer-events:none;-webkit-appearance:none;appearance:none;background:none;top:6px}
.slider input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);cursor:pointer}
.slider input::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);cursor:pointer}
.slider .track{position:absolute;left:0;right:0;top:14px;height:3px;background:var(--line);border-radius:2px}
.slider .fill{position:absolute;top:14px;height:3px;background:var(--accent);border-radius:2px}
.yr{display:flex;justify-content:space-between;color:var(--ink2);font-size:13px}
.toggle{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink2);cursor:pointer;margin-top:6px}
section#results{padding:14px 18px 80px;min-width:0}
#artistHead{display:none;margin:4px 0 18px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
#artistHead.on{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
#artistHead h2{font:400 34px/1.1 var(--serif);margin:0 0 6px}
#artistHead .facts{color:var(--ink2)}
#artistHead .facts a{color:var(--accent)}
#artistHead .acts{margin-left:auto;display:flex;gap:8px}
#grid{display:flex;flex-wrap:wrap;gap:10px}
#grid::after{content:"";flex-grow:999999}
.tile{position:relative;flex-grow:calc(var(--ar)*100);flex-basis:calc(var(--ar)*var(--rowH));max-width:calc(var(--ar)*var(--rowH)*1.8);
  border-radius:6px;overflow:hidden;background:var(--bg2);cursor:pointer;border:0;padding:0;text-align:left}
.tile i{display:block;padding-bottom:calc(100%/var(--ar))}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.tile img.ok{opacity:1}
.tile .ph,.ph-full{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;font:400 15px/1.2 var(--serif);color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.4)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#f6f0e6;
  font-size:12.5px;line-height:1.3;opacity:0;transition:opacity .25s}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1}
.tile .cap b{display:block;font:400 14.5px/1.25 var(--serif)}
.tile .badge{position:absolute;top:6px;right:6px;font:600 10px/1 var(--sans);letter-spacing:.06em;background:rgba(0,0,0,.55);color:#f0d79c;padding:4px 6px;border-radius:4px}
#more{height:60px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.empty{padding:60px 10px;text-align:center;color:var(--ink2)}
.empty h2{font:400 26px var(--serif);color:var(--ink)}
@media (max-width: 820px){
  :root{--rowH:150px}
  main{grid-template-columns:1fr}
  #filtersBtn{display:inline-block}
  aside{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:78vh;z-index:50;background:var(--panel);border-right:0;border-top:1px solid var(--line);
    border-radius:18px 18px 0 0;transform:translateY(105%);transition:transform .3s;box-shadow:0 -20px 60px rgba(0,0,0,.4)}
  aside.open{transform:none}
  #chipsbar{flex-wrap:nowrap;overflow-x:auto}
  header{padding:8px 12px}
  .tools select{max-width:120px}
}
.sheetHead{display:none}
@media (max-width: 820px){ .sheetHead{display:flex;justify-content:space-between;align-items:center;padding:12px 0 4px;position:sticky;top:0;background:var(--panel);z-index:2} }
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* assembled site additions */
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--accent);color:var(--chipOnInk);padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.sitenav{display:flex;gap:16px;flex-basis:100%;font-size:14px}
.sitenav a{color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent}
.sitenav a:hover,.sitenav a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}
.toggle.describe{margin-top:0;white-space:nowrap}
.voicepanel{border-bottom:1px solid var(--line);padding:10px 18px 14px;background:var(--panel)}
.voicepanel[hidden]{display:none}
.vphead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.vphead .hint{color:var(--ink3);font-size:13px}
.vphead .btn{margin-left:auto}
#voiceSlot{color:var(--ink)}
/* the founder's rule holds in the grid too: titles sit under each picture, never over it */
.tile{--capH:44px;background:var(--bg2)}
.tile i{padding-bottom:calc(100%/var(--ar) + var(--capH))}
.tile img{bottom:auto;height:calc(100% - var(--capH))}
.tile .ph{bottom:var(--capH)}
.tile .cap,.tile:hover .cap,.tile:focus-visible .cap{opacity:1;height:var(--capH);padding:4px 8px;background:var(--panel);color:var(--ink2);font-size:12px;
  line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tile .cap b{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .badge{top:auto;bottom:6px;right:6px;background:var(--chip);color:var(--accent)}
@media (max-width: 820px){
  .searchwrap{flex-basis:100%;max-width:none;order:2}
  .toggle.describe{order:3;white-space:normal}
  .tools{order:4;margin-left:0;flex-wrap:wrap}
  .sitenav{order:5}
  aside{max-height:min(78vh,calc(100dvh - 40px))}
}