@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');

:root{color-scheme:dark;--ink:#eef6ff;--muted:#93a5b8;--night:#07111f;--panel:#0d1a2b;--cyan:#43e5e9;--violet:#9c72ff;--line:rgba(180,220,255,.14);--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--night);color:var(--ink);font-family:'DM Sans',sans-serif;line-height:1.55}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}.skip-link{position:fixed;z-index:1000;left:1rem;top:-5rem;background:#fff;color:#07111f;padding:.7rem 1rem;border-radius:.5rem}.skip-link:focus{top:1rem}:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.site-shell{min-height:100vh;overflow:hidden;background:radial-gradient(circle at 83% 5%,rgba(83,46,148,.2),transparent 28%),var(--night)}.site-header{height:84px;max-width:var(--max);margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:.65rem;font:700 1rem/1 'Manrope';letter-spacing:.22em;text-decoration:none}.brand-mark{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid rgba(67,229,233,.6);border-radius:9px;color:var(--cyan);font:700 1rem 'Manrope';box-shadow:inset 0 0 16px rgba(67,229,233,.09)}.site-header nav{display:flex;gap:2.5rem}.site-header nav a{color:var(--muted);text-decoration:none;font-size:.9rem}.site-header nav a:hover{color:var(--ink)}.nav-action,.secondary-button{border:1px solid rgba(67,229,233,.35);background:rgba(67,229,233,.08);color:var(--cyan);border-radius:999px;padding:.65rem 1rem;text-decoration:none;font-weight:600}.content-width{width:min(var(--max),calc(100% - 48px));margin-left:auto;margin-right:auto;margin-inline:auto}.kicker{text-transform:uppercase;color:var(--cyan);font:600 .7rem 'Manrope';letter-spacing:.18em}h1,h2,h3,p{margin-top:0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2.2rem}.section-heading h2{font:500 clamp(2rem,4vw,3.2rem) 'Manrope';letter-spacing:-.045em;margin:.7rem 0 0}.section-heading>p{color:var(--muted)}.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card-visual{height:210px;display:flex;align-items:center;justify-content:center;position:relative;text-decoration:none;background:radial-gradient(circle at 65% 30%,rgba(156,114,255,.28),transparent 34%),linear-gradient(145deg,#122b41,#10172f)}.visual-monogram{font:500 5rem 'Manrope';color:rgba(217,245,255,.24)}.card-category{position:absolute;left:1rem;bottom:1rem;padding:.3rem .6rem;border-radius:99px;background:rgba(4,13,24,.7);font-size:.72rem}.card-body{padding:1.25rem}.card-meta{display:flex;justify-content:space-between;color:var(--cyan);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.card-body h3{font:600 1.3rem 'Manrope';margin:.6rem 0}.card-body h3 a{text-decoration:none}.card-body p{color:var(--muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.detail-skeleton{min-height:360px;border-radius:18px;background:linear-gradient(100deg,#0c1b2b 30%,#152b40 45%,#0c1b2b 60%);background-size:200% 100%;animation:shimmer 1.3s infinite}.state-card{text-align:center;padding:70px 24px;border:1px dashed rgba(147,165,184,.3);border-radius:18px;color:var(--muted)}.state-card>span{font-size:2rem;color:var(--cyan)}.state-card h3,.state-card h1{color:var(--ink);margin:1rem 0 .4rem}.state-card .secondary-button{display:inline-block;margin-top:1rem;cursor:pointer}.detail-page{padding-block:60px 100px}.back-link{color:var(--muted);text-decoration:none}.detail-card{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--panel)}.detail-visual{min-height:540px;display:grid;place-items:center;background:radial-gradient(circle,rgba(67,229,233,.18),transparent 35%),linear-gradient(140deg,#102d43,#17163b)}.detail-visual span{font:500 10rem 'Manrope';color:rgba(255,255,255,.15)}.detail-content{padding:clamp(2rem,5vw,5rem)}.detail-content h1{font:500 clamp(2.5rem,5vw,4.4rem)/1 'Manrope';letter-spacing:-.055em;margin:1rem 0}.detail-lede{color:#b4c0cd;font-size:1.1rem}.detail-fact{padding:1rem 0;border-top:1px solid var(--line)}.detail-fact span,.detail-fact strong{display:block}.detail-fact span{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.data-note{margin-top:2rem;padding:1rem;border-left:2px solid var(--violet);background:rgba(156,114,255,.07)}.data-note p{margin:.25rem 0 0;color:var(--muted);font-size:.85rem}.site-footer{max-width:var(--max);margin:auto;padding:45px 24px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}.site-footer p{margin:0}.source-note{max-width:450px;text-align:right}#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;padding:1rem;background:#582127;color:white;text-align:center}#blazor-error-ui a{margin-left:1rem}.dismiss{position:absolute;right:1rem;cursor:pointer}@keyframes shimmer{to{background-position:-200% 0}}

@media(max-width:800px){.site-header nav{display:none}.detail-card{grid-template-columns:1fr}.listing-grid{grid-template-columns:1fr 1fr}.detail-visual{min-height:300px}.site-footer{grid-template-columns:auto 1fr}.source-note{grid-column:1/-1;text-align:left}}
@media(max-width:520px){.site-header{height:70px;padding-left:16px;padding-right:16px;padding-inline:16px}.nav-action{font-size:.8rem}.content-width{width:min(100% - 32px,var(--max))}.listing-grid{grid-template-columns:1fr}.section-heading{display:block}.detail-page{padding-top:35px}.detail-content{padding:1.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Listing provenance, unknown values and category illustrations */
.card-visual,.detail-visual{position:relative;overflow:hidden}
.category-art{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover}
.category-art~.visual-monogram{display:none}
.card-visual .art-label,.detail-visual .art-label{position:absolute;right:.75rem;top:.75rem;padding:.2rem .5rem;border-radius:99px;background:rgba(4,13,24,.72);color:#c9d6e3;font:400 .68rem/1.4 'DM Sans',sans-serif;letter-spacing:0}
.detail-visual .visual-monogram{font:500 10rem 'Manrope';color:rgba(255,255,255,.15)}
.unknown-text{color:var(--muted);font-style:italic}
.description-credit{color:var(--muted);font-size:.78rem;margin-top:-.5rem}
.detail-facts{margin:1.5rem 0 0}
.detail-facts dt{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.detail-facts dd{margin:.25rem 0 0;font-weight:600}
.detail-facts dd small{display:block;margin-top:.25rem;color:var(--muted);font-weight:400}
.detail-facts a{color:var(--cyan)}
.source-panel{margin-top:2rem;padding:1rem 1.1rem;border-left:2px solid var(--cyan);background:rgba(67,229,233,.06)}
.source-panel h2{font:600 .95rem 'Manrope';margin:0 0 .5rem}
.source-panel p{margin:.35rem 0 0;font-size:.85rem}
.source-panel a{color:var(--cyan)}
.attribution{color:#d6e2ee}
.verification-note{color:var(--muted)}

.build-version{grid-column:1/-1;margin:0;color:var(--muted);font-size:.72rem}

/* Search flow: one box, results page with tabs, compact rows, numbered pages */
.search-bar{position:relative;z-index:1;display:flex;align-items:center;width:min(720px,100%);background:rgba(15,29,46,.92);border:1px solid rgba(113,224,238,.3);border-radius:999px;padding:.35rem .35rem .35rem 1.1rem;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.search-bar:focus-within{border-color:var(--cyan)}
.search-bar input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:1rem;padding:.6rem 0;outline:0}
.search-bar input::placeholder{color:#8496aa}
.search-bar button{flex:none;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--cyan),#78bded);color:#06141c;cursor:pointer}
.search-icon{width:22px;height:22px}
.search-bar button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.search-page{padding-block:20px 48px}
.search-page .search-bar{width:100%;max-width:720px;box-shadow:none}
.search-tabs{display:flex;gap:.4rem;overflow-x:auto;margin:1rem 0 .5rem;padding-bottom:.25rem;scrollbar-width:none}
.search-tabs a{flex:none;padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;color:#aebccb;text-decoration:none;font-size:.88rem}
.search-tabs a:hover{color:var(--ink)}
.search-tabs a[aria-current="page"]{border-color:var(--cyan);color:var(--cyan);font-weight:600}
.search-summary{color:var(--muted);font-size:.85rem;margin:.75rem 0}
.search-results{list-style:none;margin:0;padding:0;max-width:760px}
.search-result{display:grid;grid-template-columns:64px 1fr;gap:.9rem;padding:.9rem 0;border-top:1px solid var(--line)}
.search-thumb{position:relative;display:block;width:64px;height:64px;border-radius:12px;overflow:hidden;background:linear-gradient(145deg,#122b41,#10172f)}
.search-thumb .visual-monogram{display:grid;place-items:center;height:100%;font:500 1.6rem 'Manrope';color:rgba(217,245,255,.3)}
.search-meta{margin:0;color:var(--muted);font-size:.78rem}
.search-result h2{margin:.15rem 0 .25rem;font:600 1.05rem/1.3 'Manrope'}
.search-result h2 a{color:#9fe9ee;text-decoration:none}
.search-result h2 a:hover{text-decoration:underline}
.search-snippet{margin:0;color:#b4c0cd;font-size:.88rem}
.search-pages{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:1.5rem 0}
.search-pages a,.search-pages span{min-width:44px;min-height:44px;display:inline-grid;place-items:center;padding:0 .6rem;border-radius:10px;text-decoration:none;color:var(--ink)}
.search-pages a{border:1px solid var(--line)}
.search-pages a:hover{border-color:var(--cyan)}
.search-pages span[aria-current="page"]{background:var(--cyan);color:#06141c;font-weight:700}
.search-pages .search-gap{color:var(--muted)}
.search-empty{padding:1.5rem 0}
.search-empty h1{font:500 1.4rem 'Manrope';margin-bottom:.5rem}
.search-empty li{color:var(--muted);margin:.35rem 0}
.search-empty a{color:var(--cyan)}
.section-heading p a{color:var(--cyan)}
@media(min-width:600px){.search-result{grid-template-columns:88px 1fr}.search-thumb{width:88px;height:88px}.search-page{padding-block:28px 56px}}

/* Link-based discovery controls (work without the interactive connection) */

/* Shop space (affiliate picks) and reserved ad slots */
.ad-slot{display:grid;place-items:center;margin:24px 0;border:1px dashed rgba(147,165,184,.35);border-radius:14px;color:var(--muted);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.ad-slot-banner{min-height:100px}
.ad-slot-card{min-height:250px}

/* Listing detail: mobile first. Overrides the earlier desktop-first rules. */
.detail-page{padding-block:16px 48px}
.detail-page .back-link{display:inline-block;padding:.5rem 0}
.detail-card{grid-template-columns:1fr;margin-top:12px;border-radius:18px}
.detail-visual{min-height:40vw;aspect-ratio:16/9}
.detail-visual .visual-monogram{font-size:5rem}
.detail-content{padding:1.25rem}
.detail-content h1{font-size:clamp(2rem,7vw,2.75rem);line-height:1.05;margin:.4rem 0 .5rem}
.detail-lede{font-size:1rem;margin-bottom:.75rem}
.detail-facts{display:grid;grid-template-columns:1fr;column-gap:1.5rem;margin-top:.75rem}
.detail-facts .detail-fact{padding:.6rem 0}
.source-panel{margin-top:1rem;padding:.75rem .9rem}
.source-panel p{font-size:.8rem}
@media(min-width:600px){
.detail-content{padding:1.5rem 1.75rem}
.detail-facts{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
.detail-page{padding-block:24px 40px}
.detail-card{grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:16px;border-radius:22px}
.detail-visual{aspect-ratio:auto;min-height:100%}
.detail-visual .visual-monogram{font-size:8rem}
.detail-content{padding:1.75rem 2.25rem}
.detail-content h1{font-size:clamp(2.25rem,3.4vw,3rem)}
}

/* Header tools: account links and theme toggle (also used on the homepage) */
.header-tools{display:flex;align-items:center;gap:.5rem}
/* Shop hero: heading + "Have you Zunvi'd it?" + animated scene (Zunvi.UI ShopScene) */
.shop-hero{display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.shop-hero h1{margin-bottom:.2rem}
.shop-tagline{margin:0 0 .9rem;font:600 clamp(1.15rem,3.6vw,1.6rem)/1.2 'Manrope';letter-spacing:-.02em;color:var(--ink)}
@media(max-width:520px){.shop-hero .shop-scene{width:84px;height:70px}}
/* Shop: an animated bag icon (Zunvi.UI ShopBagIcon), 44px target, on every screen size */
.shop-icon-link{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--muted);text-decoration:none;transition:color var(--m-hover,180ms) ease-out,background-color var(--m-hover,180ms) ease-out}
.shop-icon-link:hover{color:var(--cyan);background:rgba(67,229,233,0.1);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.shop-icon-link:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;color:var(--cyan)}
.account-links{display:flex;align-items:center;gap:.15rem;margin:0;font-size:.85rem}
.account-links,.account-links a,.account-links button{color:var(--muted);text-decoration:none}
.account-links a,.account-links button{display:inline-grid;place-items:center;min-height:44px;padding:0 .6rem;border:0;background:none;font:inherit;cursor:pointer;border-radius:8px}
.account-links a:hover,.account-links button:hover{color:var(--ink);text-decoration:underline}
.account-links a:focus-visible,.account-links button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;color:var(--ink)}
.theme-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;color:var(--ink)}
/* Icon shows the theme in use: filled = Night, hollow = Dawn */
.theme-icon{width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;background:currentColor;transition:background-color .3s ease}
html[data-theme="light"] .theme-icon{background:transparent}
/* For half a second after a switch, colours ease across (js/theme.js) */
html.theme-changing,html.theme-changing *,html.theme-changing *::before,html.theme-changing *::after{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease!important}
@media(prefers-reduced-motion:reduce){html.theme-changing *{transition:none!important}}
@media(max-width:420px){.wordmark span:last-child{display:none}.header-tools{gap:.2rem}.nav-action{padding:.6rem .8rem}}

/* Dawn (light) theme for every page; palette and contrast in
   docs/design/palette.md. Admin overrides are at the end of atlas-admin.css. */
html[data-theme="light"] body{color-scheme:light;--ink:#1c1f3f;--muted:#4d5375;--night:#f8f4ec;--panel:#ffffff;--cyan:#09716c;--violet:#6b46c9;--line:rgba(28,31,63,.14)}
html[data-theme="light"] .site-shell{background:radial-gradient(70% 40% at 80% 0%,rgba(246,199,122,.22),transparent 70%),radial-gradient(60% 40% at 0% 10%,rgba(167,139,250,.14),transparent 70%)}
html[data-theme="light"] .brand-mark{background:rgba(9,113,108,.08);border-color:rgba(9,113,108,.45)}
html[data-theme="light"] .nav-action,html[data-theme="light"] .secondary-button{background:rgba(9,113,108,.06);border-color:rgba(9,113,108,.4)}
html[data-theme="light"] .card-visual,html[data-theme="light"] .search-thumb,html[data-theme="light"] .detail-visual{background:linear-gradient(145deg,#ece6f5,#dfefee)}
html[data-theme="light"] .visual-monogram,html[data-theme="light"] .search-thumb .visual-monogram,html[data-theme="light"] .detail-visual .visual-monogram{color:rgba(28,31,63,.25)}
html[data-theme="light"] .card-category,html[data-theme="light"] .card-visual .art-label,html[data-theme="light"] .detail-visual .art-label{background:rgba(255,255,255,.88);color:#1c1f3f}
html[data-theme="light"] .detail-skeleton{background:linear-gradient(90deg,#efe9f6,#f6f2ea,#efe9f6)}
html[data-theme="light"] .state-card{border-color:rgba(77,83,117,.3)}
html[data-theme="light"] .detail-lede,html[data-theme="light"] .search-snippet{color:#3c4262}
html[data-theme="light"] .data-note{background:rgba(107,70,201,.06)}
html[data-theme="light"] .source-panel{background:rgba(9,113,108,.06)}
html[data-theme="light"] .attribution{color:#2c3150}
html[data-theme="light"] .search-bar{background:#fff;border-color:rgba(28,31,63,.18);box-shadow:0 10px 30px rgba(28,31,63,.08)}
html[data-theme="light"] .search-bar input::placeholder{color:#646a88}
html[data-theme="light"] .search-bar button,html[data-theme="light"] .search-pages span[aria-current="page"]{background:#09716c;color:#fff}
html[data-theme="light"] .search-tabs a{color:#4d5375}
html[data-theme="light"] .search-result h2 a{color:#3f37a3}
html[data-theme="light"] .ad-slot{border-color:rgba(77,83,117,.35)}

/* Blazor moves focus to the page heading after navigation (for screen
   readers); headings are not interactive, so no focus ring is drawn. */
h1:focus{outline:none}

/* About, FAQ and Privacy pages; footer links */
.site-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.site-links a{display:inline-block;padding:.5rem 0;color:var(--muted)}
.site-links a:hover{color:var(--ink)}
.info-page{max-width:760px;padding-block:48px 80px}
.info-page h1{font:500 clamp(2rem,6vw,3.2rem)/1.1 'Manrope';letter-spacing:-.04em;margin:.8rem 0 1rem}
.info-page h2{font:600 1.25rem 'Manrope';margin:2.2rem 0 .6rem}
.info-page p,.info-page li{color:var(--muted)}
.info-page strong{color:var(--ink)}
.info-page a{color:var(--cyan)}
.info-page ul{padding-left:1.2rem}
.info-page li{margin:.45rem 0}
.info-lede{font-size:1.1rem;color:var(--ink)!important}
.info-meta{font-size:.85rem}
.faq details{border-top:1px solid var(--line);padding:.2rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:.9rem 0;min-height:44px;font:600 1.02rem 'Manrope';color:var(--ink)}
.faq summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.faq details p{margin:0 0 1rem}

/* Directory structure: breadcrumbs and place / category hubs */
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem;margin:0 0 1rem;padding:0;font-size:.85rem;color:var(--muted)}
.breadcrumbs li+li::before{content:"›";margin-right:.35rem;color:var(--muted)}
.breadcrumbs a{display:inline-block;padding:.35rem 0;color:var(--muted)}
.breadcrumbs a:hover{color:var(--ink)}
.breadcrumbs [aria-current]{padding:.35rem 0;color:var(--ink)}
.hub-page{max-width:900px;padding-block:40px 80px}
.hub-page h1{font:500 clamp(2rem,6vw,3.2rem)/1.1 'Manrope';letter-spacing:-.04em;margin:.4rem 0 .8rem}
.hub-lede{color:var(--muted);max-width:640px;margin-bottom:1.6rem}
.hub-categories{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.hub-categories>li{border-top:1px solid var(--line);padding-top:1rem}
.hub-category{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-height:44px;text-decoration:none}
.hub-category strong{font:600 1.3rem 'Manrope';color:var(--ink)}
.hub-category span,.hub-subcategories span,.hub-chips span{color:var(--muted);font-size:.85rem}
.hub-category:hover strong{text-decoration:underline}
.hub-subcategories,.hub-chips{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.hub-chips{margin:0 0 1.4rem}
.hub-subcategories a,.hub-chips a{display:inline-flex;gap:.4rem;align-items:center;min-height:44px;padding:0 .9rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none}
.hub-subcategories a:hover,.hub-chips a:hover{border-color:var(--cyan)}


/* Shop: same structure as the directory hubs (Shop.razor, ShopCard.razor) */
:root{--g-chain:rgba(214,226,240,.55);--g-edge:rgba(255,255,255,.35);--g-shine:rgba(255,255,255,.55);--shop-card:rgba(12,27,44,.78)}
html[data-theme="light"]{--g-chain:rgba(28,31,63,.45);--g-edge:rgba(28,31,63,.25);--g-shine:rgba(255,255,255,.75);--shop-card:#fff}
.affiliate-disclosure{max-width:640px;margin:0 0 1.4rem;padding:.8rem 1rem;border-left:2px solid var(--violet);background:rgba(156,114,255,0.07);background:color-mix(in srgb,var(--violet) 7%,transparent);color:var(--muted);font-size:.85rem}
.affiliate-disclosure strong{display:block;color:var(--ink);font-weight:600}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;list-style:none;margin:0;padding:0}
.shop-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--shop-card)}
html[data-theme="light"] .shop-card{box-shadow:0 10px 30px rgba(28,31,63,.06)}
.shop-visual{position:relative;height:170px;display:grid;place-items:center;border-radius:17px 17px 0 0;background:radial-gradient(circle at 50% 40%,rgba(67,229,233,0.12),transparent 65%),var(--line);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--cyan) 12%,transparent),transparent 65%),color-mix(in srgb,var(--ink) 4%,transparent)}
.gem-art{width:68%;height:auto;max-height:150px}
.shop-visual .art-label{position:absolute;right:.7rem;top:.7rem;padding:.15rem .5rem;border-radius:99px;background:var(--night);background:color-mix(in srgb,var(--night) 70%,transparent);color:var(--muted);font-size:.68rem}
.shop-body{display:flex;flex-direction:column;flex:1;padding:1rem 1.1rem 1.2rem}
.shop-meta{margin:0 0 .3rem;color:var(--cyan);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.shop-body h3{margin:0 0 .4rem;font:600 1.08rem/1.3 'Manrope';color:var(--ink)}
.shop-description{margin:0 0 .6rem;color:var(--muted);font-size:.9rem}
.shop-facts{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .9rem;padding:0}
.shop-facts li{padding:.15rem .55rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.75rem}
.shop-link{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:44px;padding:.55rem .9rem;border-radius:12px;background:var(--cyan);color:#06141c;font-weight:700;text-decoration:none}
.shop-link small{font-weight:500;font-size:.72rem;opacity:.8}
.shop-link:hover{filter:brightness(1.08)}
html[data-theme="light"] .shop-link{background:#09716c;color:#fff}
.shop-link:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
/* Search suggestions (js/suggest.js): a calm panel under the search box */
.has-suggestions{position:relative}
.suggest-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);margin:0;padding:.35rem;list-style:none;max-height:min(60vh,420px);overflow:auto;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 18px 40px rgba(0,0,0,.28);animation:suggest-in 140ms cubic-bezier(.2,.8,.2,1)}
.suggest-list a{display:flex;flex-direction:column;gap:.1rem;min-height:44px;justify-content:center;padding:.45rem .75rem;border-radius:10px;text-decoration:none;color:var(--ink)}
.suggest-list [aria-selected="true"] a{background:rgba(67,229,233,0.14);background:color-mix(in srgb,var(--cyan) 14%,transparent)}
.suggest-name{font-weight:600}
.suggest-meta{color:var(--muted);font-size:.78rem}
@keyframes suggest-in{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.suggest-list{animation:suggest-fade 140ms linear}}
@keyframes suggest-fade{from{opacity:0}}
html[data-theme="light"] .suggest-list{box-shadow:0 18px 40px rgba(28,31,63,.12)}
.home-search .suggest-list{max-height:min(38vh,340px)} /* the homepage frame clips overflow; scroll inside instead */
/* Sign in and passkeys (SignIn.razor, AdminPasskeys.razor) */
.signin-page{max-width:560px}
.signin-passkey{margin:1.2rem 0 0}
.signin-primary{width:100%;min-height:52px;border:0;border-radius:14px;background:var(--cyan);color:#06141c;font:700 1rem 'Manrope';cursor:pointer}
.signin-primary:disabled{opacity:.6;cursor:progress}
.signin-primary:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
html[data-theme="light"] .signin-primary{background:#09716c;color:#fff}
.signin-status{min-height:1.4em;margin:.5rem 0 0;color:var(--muted);font-size:.9rem}
.signin-or{display:flex;align-items:center;gap:.8rem;margin:1.2rem 0;color:var(--muted);font-size:.85rem}
.signin-or::before,.signin-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.signin-google{display:block;text-align:center}
.signin-note{margin-top:1.4rem;color:var(--muted);font-size:.88rem}
.signin-subhead{margin:2rem 0 .6rem;font:600 1.15rem 'Manrope'}
.signin-steps{padding-left:1.2rem;color:var(--muted)}
.signin-steps li{margin:.4rem 0}

/* Category and town rows lead the suggestions, marked as "browse" rows */
.suggest-category .suggest-name::before,.suggest-place .suggest-name::before{content:"\21B3  ";color:var(--cyan)}
.suggest-category+.suggest-listing,.suggest-place+.suggest-listing{margin-top:.25rem;border-top:1px solid var(--line);padding-top:.25rem}

/* Shop search (Shop.razor): one calm field above the section chips. */
.shop-search{display:flex;gap:.5rem;margin:0 0 1rem;max-width:560px}
.shop-search input{flex:1;min-height:44px;padding:.55rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:inherit}
.shop-search input:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.shop-search button{min-height:44px;padding:.55rem 1.1rem;border:1px solid rgba(67,229,233,.35);border-radius:999px;background:rgba(67,229,233,.08);color:var(--cyan);font-weight:600;cursor:pointer}
.shop-search-result{color:var(--muted);margin:-.4rem 0 1rem}
.shop-search-result a{color:var(--cyan)}

/* Signed in: one "Account" link with the initial (AccountLinks.razor). */
a.account-links{min-height:44px;padding:0 .6rem;border-radius:999px}
a.account-links:hover{color:var(--ink)}
a.account-links:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;color:var(--ink)}
.account-entry{gap:.45rem}
.account-initial{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(67,229,233,0.18);background:color-mix(in srgb,var(--cyan) 18%,transparent);border:1px solid var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 55%,transparent);color:var(--ink);font:700 .8rem/1 'Manrope',sans-serif}

/* ============================================================
   ZUNVI PASSPORT (decision 0010): Zunvi it, the chip, the passport.
   ============================================================ */
.zunvi-it{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin:.2rem 0 .6rem;padding:0 1rem 0 .4rem;border:1px solid var(--violet);border:1px solid color-mix(in srgb,var(--violet) 55%,transparent);border-radius:999px;background:rgba(156,114,255,0.1);background:color-mix(in srgb,var(--violet) 10%,transparent);color:var(--ink);font:600 .9rem 'DM Sans',sans-serif;cursor:pointer;align-self:flex-start}
.zunvi-it:hover{background:rgba(156,114,255,0.18);background:color-mix(in srgb,var(--violet) 18%,transparent)}
.zunvi-it:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.zunvi-it-stamp{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px dashed var(--violet);color:var(--violet);font:800 .8rem 'Manrope',sans-serif;transform:rotate(-12deg)}
.zunvi-it.is-stamped{border-style:dashed;background:transparent;cursor:default}
.zunvi-it.is-stamped .zunvi-it-stamp{background:rgba(156,114,255,0.22);background:color-mix(in srgb,var(--violet) 22%,transparent);border-style:solid}
.zunvi-it.is-stamping .zunvi-it-stamp{animation:zunvi-stamp .55s cubic-bezier(.2,.8,.2,1)}
@keyframes zunvi-stamp{0%{transform:scale(2) rotate(-30deg);opacity:0}60%{transform:scale(.9) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-12deg)}}
.passport-chip{position:fixed;z-index:40;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.35rem 1.1rem .35rem .4rem;border:1px solid var(--violet);border:1px solid color-mix(in srgb,var(--violet) 50%,transparent);border-radius:999px;background:var(--panel);background:color-mix(in srgb,var(--panel) 94%,transparent);color:var(--ink);font:600 .9rem 'DM Sans',sans-serif;text-decoration:none;box-shadow:0 14px 34px rgba(0,0,0,.28);backdrop-filter:blur(8px)}
.passport-chip-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:2px dashed var(--violet);color:var(--violet);font:800 .85rem 'Manrope',sans-serif}
.passport-chip.is-new{animation:chip-pop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes chip-pop{0%{transform:translate(-50%,16px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}
.passport-chip:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.passport-page{padding-block:2.5rem 6rem;max-width:760px}
.passport-header h1,.passport-join h1{font:700 clamp(2rem,6vw,3rem)/1.1 'Manrope',sans-serif;letter-spacing:-.03em;margin:.4rem 0 .6rem}
.passport-card{margin:0 0 1.2rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.passport-card h2{margin:0 0 .3rem;font:600 1.15rem 'Manrope',sans-serif}
.passport-muted{color:var(--muted);font-size:.88rem}
.passport-towns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.passport-towns button{min-height:44px;padding:0 1rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:600 .9rem 'DM Sans',sans-serif;cursor:pointer}
.passport-towns button:hover{border-color:var(--cyan)}
.passport-stamps{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.6rem}
.passport-stamps li{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem .5rem .5rem;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.passport-stamps a{flex:1;display:flex;align-items:center;gap:.8rem;min-height:48px;color:var(--ink);text-decoration:none}
.passport-stamps a span{display:grid}
.passport-stamps small{color:var(--muted)}
.passport-stamp-mark{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:2px dashed var(--violet);color:var(--violet);font:800 1rem 'Manrope',sans-serif;transform:rotate(-10deg)}
.passport-stamps form{margin:0}
.passport-stamps button{min-height:44px;padding:0 .8rem;border:0;background:none;color:var(--muted);font:inherit;cursor:pointer}
.passport-stamps button:hover{color:var(--ink);text-decoration:underline}
.passport-claim{text-align:center;margin-top:1.4rem}
.passport-primary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.6rem;border:0;border-radius:999px;background:var(--cyan);color:#06141c;font:700 1rem 'DM Sans',sans-serif;text-decoration:none;cursor:pointer}
html[data-theme="light"] .passport-primary{background:#09716c;color:#fff}
.passport-primary:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.passport-join-form{display:grid;gap:.7rem}
.passport-join-form label{font-weight:600}
.passport-join-form input{min-height:48px;padding:0 .9rem;border:1px solid var(--line);border-radius:14px;background:var(--night);color:var(--ink);font:1rem 'DM Sans',sans-serif}
.passport-explain{display:flex;gap:.8rem;align-items:center;margin:.3rem 0;padding:.8rem;border-radius:14px;border:1px solid var(--line);border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);background:rgba(67,229,233,0.07);background:color-mix(in srgb,var(--cyan) 7%,transparent);font-size:.9rem}
.passport-explain-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;color:var(--cyan);background:rgba(67,229,233,0.14);background:color-mix(in srgb,var(--cyan) 14%,transparent)}
.passport-alt{margin:1rem 0 .4rem}
.passport-issued{text-align:center;margin-bottom:1.4rem}
.passport-issued h1{font:700 clamp(1.8rem,6vw,2.6rem) 'Manrope',sans-serif;margin:1rem 0 .4rem}
.passport-seal{display:grid;place-items:center;width:150px;height:150px;margin:0 auto;border-radius:50%;border:3px dashed var(--violet);background:radial-gradient(circle,rgba(156,114,255,0.25),transparent 70%);background:radial-gradient(circle,color-mix(in srgb,var(--violet) 25%,transparent),transparent 70%);font:800 .85rem/1.25 'Manrope',sans-serif;letter-spacing:.14em;animation:seal-in .8s cubic-bezier(.2,.8,.2,1) both}
.passport-seal b{color:var(--cyan)}
@keyframes seal-in{0%{transform:scale(.4) rotate(-90deg);opacity:0}70%{transform:scale(1.06) rotate(6deg);opacity:1}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.zunvi-it.is-stamping .zunvi-it-stamp,.passport-chip.is-new,.passport-seal{animation:none}}

/* Sign-in page: a clear path for newcomers (decision 0010). */
.signin-new{margin-top:1.6rem;padding:1rem 1.1rem;border:1px dashed var(--violet);border:1px dashed color-mix(in srgb,var(--violet) 55%,transparent);border-radius:18px;display:grid;gap:.8rem;justify-items:start}
.signin-new p{margin:0}

/* Shop views: our cards or live Amazon listings (decision 0011). */
.shop-views{display:inline-flex;gap:.25rem;margin:0 0 1rem;padding:.25rem;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.shop-views a{display:inline-flex;align-items:center;min-height:40px;padding:0 1rem;border-radius:999px;color:var(--muted);font-weight:600;font-size:.9rem;text-decoration:none}
.shop-views a[aria-current]{background:rgba(67,229,233,0.18);background:color-mix(in srgb,var(--cyan) 18%,transparent);color:var(--ink)}
.shop-views a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.amazon-card-photo{position:relative;display:grid;place-items:center;min-height:120px;aspect-ratio:4/3;padding:1rem;background:#fff;border-radius:inherit}
.amazon-card-photo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.amazon-card-photo .art-label{position:absolute;top:.6rem;right:.6rem}
.amazon-price{margin:.2rem 0 .3rem;font-size:.92rem;color:var(--muted)}
.amazon-price strong{color:var(--ink);font-size:1.25rem}
.amazon-price-note{margin:0 0 .6rem;font-size:.8rem;color:var(--muted)}
.amazon-price-note summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
.amazon-price-note p{margin:.3rem 0 0}

/* Join page: a computer that can't hold a passkey itself (passkey.js). */
.passport-no-device{border-color:rgba(196,154,58,0.6);border-color:color-mix(in srgb,#c49a3a 60%,transparent);background:rgba(196,154,58,0.1);background:color-mix(in srgb,#c49a3a 10%,var(--panel))}
.passport-no-device ul{margin:.5rem 0 0;padding-left:1.2rem}
.passport-no-device li{margin:.2rem 0}

/* Search boxes: no browser-drawn inner field (older Safari draws one for type=search). */
.home-search input,.shop-search input,#search-input{-webkit-appearance:none;appearance:none;border-radius:0}
.shop-search input{border-radius:999px}

/* Interrupted sign-in (Pages/SignInTrouble.razor): the retry link looks like the sign-in button. */
.signin-retry{display:block;text-align:center;text-decoration:none;margin-bottom:1.6rem}

/* Which browsers can use passkeys (SignIn, PassportJoin). */
.passkey-browsers{margin:1rem 0 0;padding:.75rem .9rem;border-left:2px solid var(--violet);border-radius:0 12px 12px 0;background:rgba(156,114,255,.08);color:var(--muted);font-size:.85rem;line-height:1.5}
.passkey-browsers strong{color:var(--ink)}

/* Search boxes are required (an empty search stays on the page); no red "invalid" styling. */
.search-bar input:invalid,.shop-search input:invalid{box-shadow:none;outline:0}

/* Header on phones: "Find a place" becomes a magnifier and "Account" keeps its initial, so nothing wraps. */
.nav-action{white-space:nowrap}.nav-action-icon{display:none}
.nav-action-icon svg{width:20px;height:20px;display:block}
@media(max-width:600px){.nav-action-label,.account-entry .account-label{display:none}.nav-action{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%}.nav-action-icon{display:block}.header-tools{gap:.35rem}}

/* ==== Sticky header and listing views (1.29.0; docs/design/listing-views.md) ====
   Appended as one block; it overrides the earlier header rules instead of
   editing them. Long-hand fallbacks first for Safari 13. */

/* Sticky header. The shell clipped its overflow (which stops sticky); clip
   keeps the clipping without making it a scroll container. Older Safari
   (no overflow:clip) gets visible overflow and the page clips sideways. */
.site-shell{overflow:visible;overflow:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
/* Anchors and keyboard focus land below the header, never under it. */
html{scroll-padding-top:96px}
.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:50;max-width:none;height:84px;height:calc(84px + env(safe-area-inset-top,0px));padding-top:0;padding-top:env(safe-area-inset-top,0px);padding-left:24px;padding-right:24px;padding-left:max(24px,calc((100% - var(--max)) / 2 + 24px),env(safe-area-inset-left,0px));padding-right:max(24px,calc((100% - var(--max)) / 2 + 24px),env(safe-area-inset-right,0px));background-color:rgba(7,17,31,.94);transition:box-shadow 180ms ease-out,background-color 180ms ease-out}
html[data-theme="light"] .site-header{background-color:rgba(248,244,236,.95)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.site-header{background-color:rgba(7,17,31,.72);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
html[data-theme="light"] .site-header{background-color:rgba(248,244,236,.76)}
}
/* js/site-header.js adds is-scrolled once the page moves: a hairline shadow, nothing else. */
.site-header.is-scrolled{box-shadow:0 1px 0 rgba(180,220,255,.06),0 10px 24px -14px rgba(0,0,0,.7)}
html[data-theme="light"] .site-header.is-scrolled{box-shadow:0 1px 0 rgba(28,31,63,.05),0 10px 24px -14px rgba(28,31,63,.3)}
@media(max-width:520px){html{scroll-padding-top:82px}
.site-header{height:70px;height:calc(70px + env(safe-area-inset-top,0px));padding-left:16px;padding-right:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}
@media print{.site-header{position:static}}

/* List / Grid switch (Components/ListingViewSwitch.razor) */
.view-switch{display:inline-flex;margin:0 0 1rem;padding:2px;border:1px solid var(--line);border-radius:999px;background:rgba(13,26,43,.6)}
.view-switch a{display:inline-flex;align-items:center;min-height:44px;padding:0 .95rem;border-radius:999px;color:var(--muted);text-decoration:none;font:600 .82rem 'Manrope',sans-serif;transition:color 180ms ease-out,background-color 180ms ease-out}
.view-switch a+a{margin-left:2px}
.view-switch svg{width:16px;height:16px;margin-right:.4rem;fill:currentColor;flex:none}
.view-switch a:hover{color:var(--ink)}
.view-switch a[aria-current="page"]{background:rgba(67,229,233,.14);color:var(--cyan)}
.view-switch a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
html[data-theme="light"] .view-switch{background:rgba(255,255,255,.7)}
html[data-theme="light"] .view-switch a[aria-current="page"]{background:rgba(9,113,108,.1)}
.results-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;max-width:760px}
.results-bar .search-summary{margin-right:1rem}
.results-bar .view-switch{margin:.25rem 0}
.search-page-grid .results-bar{max-width:none;margin-bottom:.75rem}
.hub-page.hub-page-grid{max-width:none}

/* Bento grid (Components/ListingBento.razor). Phones: two columns in a
   12-tile rhythm (tiles 1 and 9 span the width, 4 and 11 are tall). */
.listing-bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:10.5rem;grid-gap:10px;gap:10px}
.bento-tile{position:relative;min-width:0}
.bento-tile:nth-child(12n+1),.bento-tile:nth-child(12n+9){grid-column:span 2}
.bento-tile:nth-child(12n+4),.bento-tile:nth-child(12n+11){grid-row:span 2}
.bento-link{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:.85rem .9rem;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#122b41,#10172f);color:var(--ink);text-decoration:none;box-shadow:0 10px 30px -18px rgba(0,0,0,.7);transition:transform 180ms cubic-bezier(.2,.8,.2,1),border-color 180ms ease-out,box-shadow 180ms ease-out}
/* The art layer clips itself (the mask keeps Safari's rounded clip with transforms), so the link's focus ring is never clipped. */
.bento-art{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;-webkit-mask-image:-webkit-radial-gradient(white,black);-webkit-transform:translateZ(0);transform:translateZ(0)}
.bento-art picture{position:absolute;top:0;right:0;bottom:0;left:0}
.bento-art .category-art{transition:transform 460ms cubic-bezier(.2,.8,.2,1)}
.bento-art .visual-monogram{display:grid;place-items:center;height:100%;font:500 3.4rem 'Manrope';color:rgba(217,245,255,.22)}
.bento-art:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(7,17,31,.95) 0%,rgba(7,17,31,.8) 42%,rgba(7,17,31,.2) 76%,rgba(7,17,31,0) 100%)}
/* One illustration per category, so neighbours show different crops and mirror images. */
.bento-tile:nth-child(3n+2) .category-art{object-position:18% 30%}
.bento-tile:nth-child(3n) .category-art{object-position:82% 65%}
.bento-tile:nth-child(5n+2) .bento-art picture,.bento-tile:nth-child(5n+4) .bento-art picture{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
.bento-kicker{order:-1;margin:0 0 .3rem;font:600 .66rem/1.25 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7ff1f3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bento-name{margin:0;font:600 1rem/1.22 'Manrope',sans-serif;letter-spacing:-.01em;color:#f4f9ff;text-shadow:0 1px 12px rgba(0,0,0,.45);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bento-detail{margin:.3rem 0 0;font-size:.76rem;line-height:1.35;color:rgba(222,234,246,.84);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bento-tile:nth-child(12n+1) .bento-name,.bento-tile:nth-child(12n+9) .bento-name,.bento-tile:nth-child(12n+4) .bento-name,.bento-tile:nth-child(12n+11) .bento-name{font-size:1.18rem}
.bento-link:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.bento-link:focus-visible .category-art{-webkit-transform:scale(1.05);transform:scale(1.05)}
.bento-link:active{-webkit-transform:scale(.985);transform:scale(.985);transition-duration:90ms}
@media (hover:hover) and (pointer:fine){
.bento-link:hover{-webkit-transform:translateY(-3px);transform:translateY(-3px);border-color:rgba(67,229,233,.45);box-shadow:0 18px 36px -18px rgba(0,0,0,.8)}
.bento-link:hover .category-art{-webkit-transform:scale(1.05);transform:scale(1.05)}
html[data-theme="light"] .bento-link:hover{border-color:rgba(9,113,108,.45);box-shadow:0 18px 36px -18px rgba(28,31,63,.45)}
}
html[data-theme="light"] .bento-link{background:linear-gradient(145deg,#ece6f5,#dfefee);box-shadow:0 10px 30px -18px rgba(28,31,63,.35)}
html[data-theme="light"] .bento-art:after{background:linear-gradient(to top,rgba(248,244,236,.97) 0%,rgba(248,244,236,.84) 42%,rgba(248,244,236,.2) 76%,rgba(248,244,236,0) 100%)}
html[data-theme="light"] .bento-name{color:#1c1f3f;text-shadow:none}
html[data-theme="light"] .bento-kicker{color:#09716c}
html[data-theme="light"] .bento-detail{color:#3c4262}
html[data-theme="light"] .bento-art .visual-monogram{color:rgba(28,31,63,.22)}
/* Wider screens: four columns, a 2x2 feature tile and a wide tile in every 12 (dense fills any gap). */
@media(min-width:720px){
.listing-bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:11rem;grid-auto-flow:row dense;grid-gap:14px;gap:14px}
.bento-tile:nth-child(n){grid-column:auto;grid-row:auto}
.bento-tile:nth-child(12n+1),.bento-tile:nth-child(12n+11){grid-column:span 2;grid-row:span 2}
.bento-tile:nth-child(12n+6),.bento-tile:nth-child(12n+12){grid-column:span 2}
.bento-tile:nth-child(n) .bento-name{font-size:1rem}
.bento-tile:nth-child(12n+1) .bento-name,.bento-tile:nth-child(12n+11) .bento-name{font-size:1.45rem}
.bento-tile:nth-child(12n+6) .bento-name,.bento-tile:nth-child(12n+12) .bento-name{font-size:1.18rem}
}
@media(min-width:1100px){.listing-bento{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* Staging (docs/design/motion.md): tiles arrive in order, 30 ms apart, 8 px rise (keyframes in Zunvi.UI css/motion.css). */
.listing-bento>li{animation:motion-arrive 260ms cubic-bezier(.2,.8,.2,1) backwards}
.listing-bento>li:nth-child(1){animation-delay:80ms}
.listing-bento>li:nth-child(2){animation-delay:110ms}
.listing-bento>li:nth-child(3){animation-delay:140ms}
.listing-bento>li:nth-child(4){animation-delay:170ms}
.listing-bento>li:nth-child(5){animation-delay:200ms}
.listing-bento>li:nth-child(6){animation-delay:230ms}
.listing-bento>li:nth-child(n+7){animation-delay:260ms}
@media (prefers-reduced-motion:reduce){
.listing-bento>li{animation:motion-fade 200ms linear backwards}
.bento-link,.bento-link:hover,.bento-link:active,.bento-art .category-art,.bento-link:hover .category-art,.bento-link:focus-visible .category-art{-webkit-transform:none!important;transform:none!important;transition-property:border-color,color,box-shadow}
}
/* ==== end of sticky header and listing views ==== */

/* Older Safari (13) has no flex gap, so rows of links, chips and buttons would touch.
   aspect-ratio arrives in the same browsers as flex gap (Safari 15, Chrome 88, Firefox 89), so where it is
   missing the spacing is carried by margins and gap is zeroed so the two never add up. Layout only. */
@supports not (aspect-ratio:1){
.site-header nav,.header-tools,.search-tabs,.search-pages,.hub-subcategories,.hub-chips,.shop-facts,.shop-search,.shop-views,.passport-towns,.site-links,.hub-subcategories a,.hub-chips a,.passport-chip{gap:0}
.site-header nav>*+*{margin-left:2.5rem}
.header-tools>*+*{margin-left:.5rem}
.search-tabs>*+*{margin-left:.4rem}
.shop-search>*+*{margin-left:.5rem}
.shop-views>*+*{margin-left:.25rem}
.hub-subcategories a>*+*,.hub-chips a>*+*{margin-left:.4rem}
.passport-chip>*+*{margin-left:.6rem}
.search-pages>*{margin:0 .35rem .35rem 0}
.hub-subcategories>*,.hub-chips>*{margin:0 .5rem .5rem 0}
.shop-facts>*{margin:0 .35rem .35rem 0}
.passport-towns>*{margin:0 .5rem .5rem 0}
.site-links>*{margin:0 1rem .25rem 0}
}
@media(max-width:600px){@supports not (aspect-ratio:1){.header-tools>*+*{margin-left:.35rem}}}
@media(max-width:420px){@supports not (aspect-ratio:1){.header-tools>*+*{margin-left:.2rem}}}