
:root{
  --bg:#f6f3ee; --surface:#fffdf9; --ink:#1d1b18; --muted:#6d665c; --line:#e3ddd3;
  --accent:#9b2f1f; --accent-ink:#fff; --chip:#ece6dc; --chip-on:#1d1b18; --chip-on-ink:#f6f3ee;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#15130f; --surface:#1e1b16; --ink:#efe9df; --muted:#a79e90; --line:#322d25;
  --accent:#e0775f; --accent-ink:#15130f; --chip:#2a261f; --chip-on:#efe9df; --chip-on-ink:#15130f;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Inter,system-ui,sans-serif}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.top{display:flex;gap:20px;align-items:center;padding-top:14px;padding-bottom:14px}
.brand{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:22px;letter-spacing:-.01em;white-space:nowrap;text-decoration:none}
.brand span{color:var(--accent)}
.search{flex:1;position:relative}
.search input{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;outline:none}
.search input:focus{border-color:var(--ink)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.5}
.hero{padding:44px 0 26px}
.hero h1{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:clamp(30px,4.6vw,54px);line-height:1.05;letter-spacing:-.02em;margin:0 0 12px;max-width:16ch}
.hero h1 em{color:var(--accent);font-style:italic}
.hero p{color:var(--muted);max-width:60ch;margin:0}
.layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;align-items:start}
.side{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto;padding:4px 4px 24px 0;scrollbar-width:thin}
.side h2{font:600 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.side .country{font:600 11px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 10px 4px;opacity:.8}
.museums{display:flex;flex-direction:column;gap:2px}
.m-card{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;border:0;background:none;border-radius:8px;padding:7px 10px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.m-card:hover{background:var(--chip)}
.m-card b{font-weight:500;font-size:14px;line-height:1.3}
.m-card small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.m-card .city{display:block;color:var(--muted);font-size:12px;font-weight:400}
.m-card[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink)}
.m-card[aria-pressed="true"] small,.m-card[aria-pressed="true"] .city{color:inherit;opacity:.75}
.m-card.dim{opacity:.4}
@media (max-width:900px){
  .layout{display:block}
  .side{position:static;max-height:none;overflow:visible;padding:0}
  .side h2,.side .country{display:none}
  .museums{flex-direction:row;overflow-x:auto;gap:8px;padding:4px 0 10px;scrollbar-width:thin}
  .m-card{flex:0 0 auto;width:auto;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px}
  .m-card .city{display:none}
  .m-card b{font-size:13px;white-space:nowrap}
}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 0 14px;border-bottom:1px solid var(--line)}
.cats{display:contents}
.chip{border:0;background:var(--chip);color:var(--ink);padding:7px 13px;border-radius:999px;font:500 13px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink)}
.chip .n{opacity:.55;margin-left:4px;font-weight:400}
.selects{display:flex;gap:8px;margin-left:auto}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px}
select{font:500 13px Inter,sans-serif;padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.meta{display:flex;justify-content:space-between;align-items:center;padding:14px 0;color:var(--muted);font-size:13px;gap:10px;flex-wrap:wrap}
.meta button{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;padding:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px 18px;padding-bottom:40px}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.ph{aspect-ratio:1;background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.ph img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease;background:#fff}
.card:hover .ph img{transform:scale(1.04)}
.ph .ship{position:absolute;left:8px;bottom:8px;background:var(--ink);color:var(--bg);font-size:11px;padding:3px 8px;border-radius:999px;opacity:.88}
.toggle{display:flex;align-items:center;gap:6px;font:500 13px Inter,sans-serif;color:var(--muted);cursor:pointer;white-space:nowrap}
.toggle input{accent-color:var(--accent)}
.ph .tag{position:absolute;left:8px;top:8px;background:var(--surface);color:var(--ink);font-size:11px;padding:3px 8px;border-radius:999px;opacity:.92}
.card .mu{margin-top:10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600}
.card .ti{font-family:Fraunces,Georgia,serif;font-size:16px;line-height:1.25;margin:3px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .pr{font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.card .pr span{font-weight:400;color:var(--muted);font-size:12px;white-space:nowrap}
.empty,.status{text-align:center;color:var(--muted);padding:60px 20px}
.status code{background:var(--chip);padding:2px 6px;border-radius:4px}
#sentinel{height:1px}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:26px 0 40px}
@media (max-width:640px){
  .wrap{padding:0 16px}
  /* compact header: logo + search on one row */
  .top{gap:12px;padding-top:10px;padding-bottom:10px}
  .brand{font-size:17px}
  .search input{padding:9px 12px 9px 36px;font-size:14px}
  .search svg{left:12px}
  /* hero shrinks to one line so products show on the first screen */
  .hero{padding:12px 0 4px}
  .hero h1{font-size:21px;line-height:1.2;max-width:none;margin:0}
  #lede{display:none}
  .hero.small{padding:12px 0 14px}
  .hero.small h1{font-size:24px;margin-bottom:8px}
  .hero.small p{font-size:14px}
  /* filters: single swipeable rows instead of wrapping */
  .museums{padding:8px 0 8px;scrollbar-width:none}
  .museums::-webkit-scrollbar,.cats::-webkit-scrollbar,.selects::-webkit-scrollbar{display:none}
  .m-card{padding:6px 12px}
  .bar{display:block;padding:0 0 8px}
  .cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
  .chip{padding:6px 12px;flex:0 0 auto}
  .sep{display:none}
  .selects{margin:0;overflow-x:auto;scrollbar-width:none;align-items:center}
  .selects select,.toggle{flex:0 0 auto}
  .toggle{order:3;font-size:12px}
  .meta{padding:8px 0}
  .grid{grid-template-columns:repeat(2,1fr);gap:18px 12px}
  .card .ti{font-size:14px}
}

/* ---- static landing pages ---- */
.crumbs{padding:18px 0 0;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.hero.small{padding:18px 0 22px}
.hero.small h1{font-size:clamp(28px,4vw,44px);max-width:24ch}
.hero.small p{max-width:70ch}
form.search{margin:0}
.more{display:inline-block;margin:6px 0 34px;padding:12px 22px;border-radius:999px;background:var(--chip-on);color:var(--chip-on-ink);text-decoration:none;font-weight:500}
.links{margin:0 0 34px}
.links h2{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:24px;margin:0 0 12px}
.links .row{display:flex;flex-wrap:wrap;gap:8px}
.links a.chip{text-decoration:none;display:inline-block}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:0 0 40px}
.hub a{display:block;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 16px;text-decoration:none}
.hub a b{display:block;font-family:Fraunces,Georgia,serif;font-weight:400;font-size:18px}
.hub a small{color:var(--muted)}
.foot-links{margin:0 0 10px}
