/* zipinns — shared polish layer + theme system (light/dark, gold brand) */
:root{
  color-scheme: light;
  --bg:#FBF7F1; --surface:#FFFFFF; --raised:#FFFFFF;
  --ink:#1C1A17; --muted:#6E665C; --line:#E9E2D7;
  --gold:#C39427; --gold-ink:#856411; --gold-soft:#F2E6C4;
  --forest:#262019; --forest-deep:#3B322A; --on-forest:#FAF6EE;
  --clay:#C2613D; --clay-deep:#A94F2F; --clay-soft:#E7B79F;
  --save:#BC5A66;
  --shadow:0 18px 50px -28px rgba(28,26,23,.35);
  --r:18px; --r-lg:26px; --max:1180px;
}
html[data-theme="dark"]{
  color-scheme: dark;
  --bg:#14151A; --surface:#1C1E25; --raised:#23262F;
  --ink:#F1ECE3; --muted:#A39C90; --line:#2E323B;
  --gold:#E2B441; --gold-ink:#E2B441; --gold-soft:#39321F;
  --forest:#E2B441; --forest-deep:#CCA033; --on-forest:#1A1611;
  --clay:#D9794F; --clay-deep:#E58A60; --clay-soft:#4A2F22;
  --save:#D07C86;
  --shadow:0 20px 54px -26px rgba(0,0,0,.66);
}
html{transition:none}
body,header,.card,.book,.sheet,.scrim,.vstep,.tcard,.chip,.cat,.field,input{transition:background-color .25s ease, border-color .25s ease, color .25s ease}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.theme-toggle:hover{border-color:var(--gold)}
.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .moon{display:block}

/* keyboard accessibility — one ring, on-brand */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,.field:focus-visible,.cat:focus-visible,.chip:focus-visible,input[type="range"]:focus-visible{
  outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink);
}
button{font-family:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[role="button"]{cursor:pointer}

/* unified art-direction grade so mixed Unsplash photos read as one system */
.ph img,.gallery img,.split .img img{filter:saturate(.96) contrast(1.03) brightness(1.005)}
.card:hover .ph img{filter:saturate(1.02) contrast(1.04)}

/* graceful image load: soft cream while loading, fade in */
.ph,.gallery img{background:var(--line)}
.ph img,.gallery img{opacity:0;transition:opacity .5s ease, transform .5s ease}
.ph img.ld,.gallery img.ld{opacity:1}

/* entrance motion — staggered fade-up, gated by reduced-motion */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)}
}

@media (prefers-reduced-motion:reduce){ .sheet,.scrim{transition:none!important} .ld-dot,.dotp{animation:none} }

/* real map containers */
.leafmap{width:100%;height:100%}
.zmap{border-radius:var(--r,18px);overflow:hidden;border:1px solid var(--line)}
/* clay price-pin marker for Leaflet */
.zpin{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(0,0,0,.35);white-space:nowrap;transition:.15s;transform:translate(-50%,-50%)}
.zpin.on{background:var(--forest);color:var(--on-forest);border-color:var(--forest);transform:translate(-50%,-50%) scale(1.1);z-index:600;position:relative}
.leaflet-container{font-family:'Plus Jakarta Sans',sans-serif!important;background:var(--bg)}

/* nav elevation on scroll */
header.scrolled{box-shadow:0 8px 24px -18px rgba(28,26,23,.5);border-bottom-color:transparent}

/* card hover sync (search) */
.card.hov .ph{box-shadow:0 16px 34px -18px rgba(28,26,23,.5)}
.card.hov .ph img{transform:scale(1.04)}

/* verification narrative (home) */
.verify .head{margin-bottom:22px}
.vcount{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:14px}
.ld-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 42%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.vrow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}
.vstep{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px}
.vstep .vn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold-soft);color:var(--forest);font-weight:700;font-size:15px;margin-bottom:14px}
.vstep h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:17px;margin-bottom:7px}
.vstep p{color:var(--muted);font-size:14.5px}
.varrow{display:grid;place-items:center;color:var(--clay);font-size:22px;padding:0 16px}
.vnote{margin-top:18px;color:var(--muted);font-size:15px}
.vnote a{color:var(--gold-ink);font-weight:600}
@media(max-width:760px){.vrow{grid-template-columns:1fr}.varrow{transform:rotate(90deg);padding:0;width:100%;justify-self:center;place-items:center}}

/* interaction layer — toast, saved hearts, gallery lightbox, filters panel */
.ztoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;padding:11px 18px;border-radius:999px;box-shadow:var(--shadow);opacity:0;transition:opacity .22s ease,transform .22s ease;z-index:2000;pointer-events:none}
.ztoast.on{opacity:1;transform:translate(-50%,0)}
.heart{transition:transform .15s ease, background .15s ease}
.heart:hover{transform:scale(1.08);background:rgba(28,26,23,.52)}
.heart:active{transform:scale(.92)}
.heart.saved{background:rgba(255,255,255,.96);backdrop-filter:none;box-shadow:0 2px 10px -2px rgba(0,0,0,.3)}
.heart.saved svg,.act.saved svg{fill:var(--save);stroke:var(--save)}
.zlb{position:fixed;inset:0;background:rgba(10,9,7,.93);z-index:1900;opacity:0;transition:opacity .25s ease;overflow:auto;padding:66px 20px 44px}
.zlb.on{opacity:1}
.zlb-grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.zlb-grid img{width:100%;border-radius:14px;display:block}
.zlb-grid img:first-child{grid-column:1/-1}
.zlb-x{position:fixed;top:18px;right:20px;width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.zlb-x:hover{background:rgba(255,255,255,.26)}
.zfilters{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 4vw;border-top:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.zfilters.on{display:flex}
.zfilters .zf-row{display:flex;align-items:center;gap:8px}
.zfilters label{font-size:14px;font-weight:600;color:var(--ink)}
.zfilters #zf-price{flex:1;min-width:160px;max-width:280px;height:4px;border-radius:999px;background:var(--line);accent-color:var(--gold)}
.zf-act{display:flex;gap:10px;margin-left:auto}
.zf-act button{font-family:inherit;font-weight:600;font-size:14px;border-radius:999px;padding:9px 18px;cursor:pointer;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);background:var(--raised);color:var(--ink)}
.zf-act button:hover{border-color:var(--ink)}
.zf-act #zf-apply{background:var(--forest);color:var(--on-forest);border-color:var(--forest)}
.zf-empty{grid-column:1/-1;padding:44px 8px;text-align:center;color:var(--muted);font-size:15px}
html[data-theme="dark"] .ztoast{box-shadow:0 8px 28px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
html[data-theme="dark"] .zpin{background:var(--raised);border-color:color-mix(in srgb,var(--ink) 22%,transparent);box-shadow:0 4px 12px -4px rgba(0,0,0,.6)}