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

/* Colour tokens: Zunvi.UI css/tokens.css (loaded first). The older names stay as aliases. */
:root{--night:var(--ground);--cyan:var(--teal)}*{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)}.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}#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){.detail-card{grid-template-columns:1fr}.listing-grid{grid-template-columns:1fr 1fr}.detail-visual{min-height:300px}}
@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)}
/* FR | EN switch (Components/LangSwitch.razor): the account links' quiet style, 44px targets; margins, not gap (Safari 13) */
.lang-switch{display:flex;align-items:center;font-size:.85rem;color:var(--muted)}
.lang-switch a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 .35rem;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:600;letter-spacing:.04em}
.lang-switch a:hover{color:var(--ink);text-decoration:underline}
.lang-switch a[aria-current="true"]{color:var(--ink)}
.lang-switch a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;color:var(--ink)}
.lang-switch-bar{margin:0 .1rem;opacity:.6}
/* "Cette page existe en français" (Components/LangOffer.razor), shown by js/lang.js */
.lang-offer{display:flex;align-items:center;justify-content:center;padding:.4rem 3rem .4rem 1rem;position:relative;border-bottom:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:.9rem;text-align:center}
.lang-offer[hidden]{display:none}
.lang-offer p{margin:0}
.lang-offer a{color:var(--cyan);font-weight:600;margin-left:.35rem}
.lang-offer-close{position:absolute;top:0;right:0;width:44px;height:100%;min-height:44px;border:0;background:none;color:var(--muted);font-size:1.2rem;cursor:pointer}
.lang-offer-close:hover{color:var(--ink)}
.lang-offer-close:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
/* 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}
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)}
/* Region pages (PlacePage.razor, RegionSummary.razor, RegionInfo.razor): hub and info styles, plus spacing */
.region-search{margin:0 0 2rem}
.region-heading{font:600 1.25rem 'Manrope';color:var(--ink);margin:2.2rem 0 .8rem}
.region-category:hover strong{text-decoration:none}
.region-summary{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:.4rem}
.region-credits{color:var(--muted);font-size:.9rem;max-width:640px}
.region-credits a{color:var(--cyan)}
.region-topics{margin-top:2.4rem}
.region-more{color:var(--muted);font-size:.85rem;margin:.5rem 0 0}


/* 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}
.shop-title-link{color:inherit;text-decoration:none}
.shop-title-link:hover,.shop-title-link:focus-visible{text-decoration:underline}
/* Product page (ShopProductPage.razor): the card's parts at page size */
.shop-product{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;margin:0 0 2rem}
.shop-product .shop-visual{height:300px;border-radius:18px}
.shop-product .gem-art{max-height:260px}
.shop-product-body h1{margin:0 0 .6rem;font:600 1.6rem/1.25 'Manrope';color:var(--ink)}
.shop-product-body h2{margin:1rem 0 .4rem;font:600 .95rem/1.3 'Manrope';color:var(--ink)}
.shop-product-note{margin:0 0 .6rem;color:var(--muted);font-size:.8rem}
.shop-product-body .shop-link{margin-top:.6rem}
.shop-product-back{margin:1rem 0 0;font-size:.9rem}
.shop-product-related{margin:0 0 1rem;font:600 1.15rem/1.3 'Manrope';color:var(--ink)}
@media (max-width:700px){.shop-product{grid-template-columns:minmax(0,1fr)}}
/* 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}
/* The "let's slow down" page for a 429 (onboarding O2, Services/TooManyRequests.cs): a small document of its own. */
.limit-page{max-width:640px;padding-block:3rem 5rem}
.limit-page h1{font:700 clamp(1.8rem,6vw,2.6rem)/1.15 'Manrope',sans-serif;letter-spacing:-.02em;margin:.4rem 0 .8rem}
.limit-page .kicker a{text-decoration:none}
.limit-hint{padding:.8rem 1rem;border-left:3px solid var(--violet);border-radius:0 12px 12px 0;background:var(--panel);color:var(--muted)}
.limit-actions a{display:inline-flex;margin:0 .6rem .6rem 0}
.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}
/* Onboarding O3 (docs/design/onboarding-2026-11.md): the region → town picker, the first-stamp invitation (once per
   device, non-blocking, js/passport.js) and the "Passport issued" note. No flex gap, inset or color-mix (Safari 13). */
.passport-towns{align-items:flex-end}
.passport-town-field{display:flex;flex-direction:column;min-width:12rem}
.passport-town-field[hidden]{display:none}
.passport-town-field label{font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.passport-town-field select{min-height:48px;padding:0 .8rem;border:1px solid var(--line);border-radius:14px;background:var(--night);color:var(--ink);font:1rem 'DM Sans',sans-serif}
.passport-towns .secondary-button{min-height:48px;cursor:pointer;font:600 .95rem 'DM Sans',sans-serif}
.passport-invite{position:fixed;z-index:41;left:12px;right:12px;bottom:76px;bottom:calc(76px + env(safe-area-inset-bottom));display:flex;align-items:flex-start;max-width:420px;margin:0 auto;padding:1rem 1.1rem;border:1px solid var(--violet);border-radius:20px;background:var(--panel);color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.32);animation:invite-rise .28s cubic-bezier(.2,.8,.2,1)}
.passport-invite .passport-chip-mark{flex:none;margin-right:.8rem}
.passport-invite-title{margin:0 0 .2rem;font:700 1rem 'Manrope',sans-serif}
.passport-invite-text{margin:0 0 .7rem;color:var(--muted);font-size:.9rem}
.passport-invite-actions{display:flex;flex-wrap:wrap;align-items:center}
.passport-invite-actions>*{margin:0 .6rem .3rem 0}
.passport-invite .passport-primary{min-height:44px;padding:0 1.1rem;font-size:.95rem}
.passport-invite-later{min-height:44px;padding:0 .6rem;border:0;background:none;color:var(--muted);font:600 .95rem 'DM Sans',sans-serif;text-decoration:underline;cursor:pointer}
.passport-invite-later:hover{color:var(--ink)}
.passport-invite-later:focus-visible,.passport-toast-close:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.passport-toast{position:fixed;z-index:42;left:12px;right:12px;top:16px;display:flex;align-items:center;justify-content:space-between;max-width:440px;margin:0 auto;padding:.7rem .6rem .7rem 1rem;border:1px solid var(--cyan);border-radius:16px;background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 14px 34px rgba(0,0,0,.28);animation:invite-rise .28s cubic-bezier(.2,.8,.2,1)}
.passport-toast-close{flex:none;width:44px;height:44px;margin-left:.6rem;border:0;border-radius:50%;background:none;color:var(--muted);font-size:1.4rem;cursor:pointer}
@keyframes invite-rise{from{opacity:0;-webkit-transform:translateY(12px);transform:translateY(12px)}to{opacity:1;-webkit-transform:none;transform:none}}
@media (prefers-reduced-motion:reduce){.passport-invite,.passport-toast{animation:none}}

/* 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:80px}
.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:50;max-width:none;height:64px;height:calc(64px + 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,10,26,.94);background-color:var(--header-bg);transition:box-shadow 180ms ease-out,background-color 180ms ease-out}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.site-header{background-color:var(--header-bg-glass);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
}
/* 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)}
/* Phones: a slimmer bar (54 px, owner request 2026-11-04, docs/design/refresh-2026-11.md §3.7) with the 28 px mark,
   which the home page's compact bar shares (css/home-field.css .home-brand). */
@media(max-width:520px){html{scroll-padding-top:70px}
.site-header .brand-mark,.home-brand .brand-mark{width:28px;height:28px;border-radius:8px;font-size:.9rem}
.site-header{height:54px;height:calc(54px + 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}

/* Grid view (Components/ListingBento.razor; visible refresh R2, prototype .tiles/.bento): one link per tile on our
   category glyph, two columns on phones, three to five on wider screens. Colours from the shared tokens. */
.listing-bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px}
.bento-tile{position:relative;min-width:0}
.bento-link{position:relative;display:flex;flex-direction:column;height:100%;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);text-decoration:none;transition:transform 220ms cubic-bezier(.2,.8,.2,1),border-color 160ms ease-out,box-shadow 220ms ease-out}
.bento-link .bento-glyph{width:100%;height:96px;margin-bottom:10px}
.bento-link .bento-glyph .glyph-ico{width:56px;height:56px}
.bento-name{margin:0 0 .2rem;font:600 .98rem/1.22 'Manrope',sans-serif;letter-spacing:-.01em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bento-kicker{margin:0;font-size:.78rem;line-height:1.3;color:var(--muted)}
.bento-detail{margin:.4rem 0 0;font-size:.74rem;line-height:1.35;color:var(--muted)}
.bento-link .badges{margin-top:.5rem}
.bento-link:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.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(-2px);transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow)}
}
@media(min-width:720px){.listing-bento{grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:14px;gap:14px}.bento-link .bento-glyph{height:120px}}
@media(min-width:960px){.listing-bento{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1180px){.listing-bento{grid-template-columns:repeat(5,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{-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){
.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,.wordmark{gap:0}
.header-tools>*+*{margin-left:.5rem}
.wordmark>*+*{margin-left:.65rem}
.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}}}

/* Service languages (docs/design/cultural-clusters.md phase 1): "Speaks" chips, autonyms, the owner's list. */
.hub-chips a[aria-current="page"]{border-color:var(--cyan);color:var(--cyan);font-weight:600}
.speaks-heading{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:.85rem;font-weight:600}
.speaks-note{margin:-.9rem 0 1.4rem;color:var(--muted);font-size:.85rem}
.speaks-hint{margin:.25rem 0 1rem;color:var(--muted)}
.lang-autonym{color:var(--muted);font-size:.9em}
.owner-languages{list-style:none;margin:.25rem 0 .5rem;padding:0}
.owner-languages li{display:inline-block;margin:0 .9rem .3rem 0}

/* ==== Visible refresh R1: header and footer (docs/design/refresh-2026-11.md §3.6; prototype .hdr and .foot) ====
   Colours from the shared tokens (Zunvi.UI css/tokens.css), so Night and Dawn need no extra rules.
   Spacing with margins, not flex gap (Safari 13); 44 px targets. */
.site-header{justify-content:flex-start}
.wordmark{flex:none;font:800 .95rem/1 'Manrope',sans-serif;letter-spacing:.24em}
.site-nav{display:flex;align-items:center;margin-left:1.6rem}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;margin-right:1.3rem;padding:0 .1rem;border-bottom:2px solid transparent;color:var(--muted);text-decoration:none;font-weight:600;font-size:.88rem}
.site-nav a:last-child{margin-right:0}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--teal)}
.site-nav a:focus-visible{outline:2px solid var(--teal);outline-offset:2px;color:var(--ink)}
.header-tools{margin-left:auto}
.header-search{display:none}
@media(min-width:960px){
.header-search{flex:1 1 auto;max-width:420px;display:flex;align-items:center;height:40px;margin:0 1rem 0 auto;padding:0 .3rem 0 .9rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel)}
.header-search:focus-within{border-color:var(--teal)}
.header-search input{flex:1 1 auto;min-width:0;padding:.4rem 0;border:0;outline:0;background:transparent;color:var(--ink);font-size:.9rem}
.header-search input::placeholder{color:var(--muted)}
.header-search input:invalid{box-shadow:none}
.header-search button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:.3rem;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.header-search button:hover{color:var(--teal)}
.header-search button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.header-search .search-icon{width:18px;height:18px}
.has-search .header-tools{margin-left:0}
.has-search .nav-action{display:none}
}
@media(max-width:720px){.site-nav{display:none}}
/* FR | EN as one pill */
.lang-switch{padding:0 .15rem;border:1px solid var(--line);border-radius:999px}
.lang-switch a{min-width:40px;font-size:.75rem;font-weight:800;letter-spacing:.08em}
.lang-switch a[aria-current="true"]{color:var(--teal)}

.site-footer{display:block;max-width:var(--max);margin:24px auto 0;padding:22px 24px 30px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;line-height:1.55}
.site-footer p{margin:0}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.foot-brand{display:flex;align-items:center;margin:0 1.5rem .3rem 0;color:var(--ink)}
.foot-brand .brand-mark{flex:none;width:32px;height:32px;margin-right:.6rem;font-size:.95rem}
.site-footer .site-links a{color:var(--ink);text-decoration:none}
.site-footer .site-links a:hover{text-decoration:underline}
.site-footer .source-note{max-width:none;text-align:left}
.site-footer .source-note a{color:var(--ink)}
.foot-credits{margin-top:.6rem}
.foot-credits p+p,.foot-sources-list p+p{margin-top:.5rem}
.foot-region{color:var(--ink);font-weight:700}
.site-footer .foot-note{margin-top:.6rem}
.foot-sources{margin:.8rem 0 0;padding:0 .8rem;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.foot-sources summary{padding:.7rem 0;color:var(--ink);font-weight:700;cursor:pointer}
.foot-sources summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
.foot-count{color:var(--muted);font-weight:600}
.foot-sources-list{padding:0 0 .8rem}
.site-footer .foot-sources+.source-note,.site-footer .foot-note+.source-note{margin-top:.6rem}
.site-footer .build-version{margin-top:.8rem}
@media(max-width:520px){.site-footer{padding-left:16px;padding-right:16px}}
/* ==== end of refresh R1 shell ==== */

/* ==== Visible refresh R2: listing cards (docs/design/refresh-2026-11.md §3.4; prototype .card and .badge) ====
   Components/ListingCard.razor and ListingBadges.razor. The name is the card's one link and stretches over it;
   the focus ring is drawn on the card. Spacing with margins, not flex gap (Safari 13). */
.search-result{position:relative}
.search-thumb,html[data-theme="light"] .search-thumb{background:none}
.search-thumb .glyph{width:64px;height:64px}
.search-thumb .glyph .glyph-ico{width:34px;height:34px}
.search-meta strong{color:var(--ink);font-weight:600}
.search-result h2 a:after,.search-result h3 a:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}
.search-result h2 a:focus-visible,.search-result h3 a:focus-visible{outline:none}
.search-result:focus-within{outline:3px solid var(--teal);outline-offset:2px;border-radius:12px}
.search-snippet{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badges{display:flex;flex-wrap:wrap;margin:.35rem 0 0}
.badge{display:inline-flex;align-items:center;min-height:24px;margin:0 .35rem .3rem 0;padding:0 .5rem;border:1px solid var(--line);border-radius:7px;background:var(--ground-2);color:var(--ink);font-size:.7rem;font-weight:700;line-height:1.3}
.badge-seal{border-color:rgba(70,224,214,.5);background:var(--teal-soft)}
.badge-z{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-right:.35rem;border:1px solid var(--teal);border-radius:4px;color:var(--teal);font:800 .55rem/1 'Manrope',sans-serif}
.badge-lang{border-color:rgba(169,139,255,.45);background:var(--violet-soft)}
.badge-hire{border-color:var(--saffron);background:var(--saffron);color:var(--saffron-ink)}
.badge-src{color:var(--muted);font-weight:600}
@media(min-width:600px){.search-thumb .glyph{width:88px;height:88px}.search-thumb .glyph .glyph-ico{width:44px;height:44px}}
/* Search "Near" row: one line that scrolls sideways (prototype .near); chip look from .hub-chips. */
.near-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;align-items:center;margin:.2rem 0 1rem;padding-bottom:2px}
.near-row a{flex:0 0 auto}
.near-label{flex:0 0 auto;margin-right:.6rem;color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
/* ==== end of refresh R2 cards ==== */

/* ==== Visible refresh R3: the listing page (docs/design/refresh-2026-11.md §3.5; prototype .lhead, .actions,
   .panel, .owner, .locator). Components/Pages/ListingDetails.razor, ListingActions.razor, ListingLocator.razor.
   Colours from the shared tokens, so Night and Dawn need few rules. Safari 13: margins, not flex gap; no inset,
   no aspect-ratio without a height; sticky with -webkit-sticky. claim.css and css/jobs.css load later, so their
   panels are restyled under .listing-page. */
.listing-page .listing-head{display:block}
.listing-head .listing-art{display:block;height:170px;min-height:0;aspect-ratio:auto}
.listing-art .listing-glyph{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:0;color:#46e0d6;color:var(--hue);font-size:1rem}
.listing-art .listing-glyph .glyph-ico{width:96px;height:96px}
.listing-art .art-label{top:auto;right:auto;left:12px;bottom:10px}
.listing-head .detail-content{padding:16px 16px 18px}
.listing-head .detail-content h1{margin:.35rem 0 .45rem}
.listing-address{margin:0 0 .6rem;color:var(--muted);font-size:.92rem}
/* Actions: Call, Directions, Website, Zunvi it, Share (44 px targets). */
.listing-actions{display:flex;flex-wrap:wrap;align-items:center;margin:12px 0 0}
.listing-actions [hidden]{display:none}
.listing-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0 .45rem .45rem 0;padding:0 1.1rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--ink);font:700 .88rem 'DM Sans',sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer}
.listing-action:hover{border-color:var(--teal)}
.listing-action:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.listing-action.is-primary{border-color:var(--teal);background:var(--teal);color:var(--teal-ink)}
.listing-action svg{flex:none;width:18px;height:18px;margin-right:.45rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.listing-actions .zunvi-it{margin:0 .45rem .45rem 0;white-space:nowrap}
.listing-actions.is-dock{display:none}
/* Phones: the actions dock at the bottom of the page while it scrolls (safe-area aware). */
@media(max-width:719px){
.listing-actions.is-head{display:none}
.listing-actions.is-dock{position:-webkit-sticky;position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px -24px 0;padding:10px 24px 4px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background-color:rgba(7,10,26,.94);background-color:var(--header-bg)}
.listing-actions.is-dock .listing-action,.listing-actions.is-dock .zunvi-it{flex:0 0 auto}
}
@media(max-width:520px){.listing-actions.is-dock{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}
/* Panels: Details, Hiring here, Source and licence on the left; the owner (or the claim prompt) and the locator on the right. */
.listing-columns{display:block}
.listing-page .listing-panel{margin:16px 0 0;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.listing-panel h2,.listing-page .claim-card h2{margin:0 0 .6rem;font:700 1rem 'Manrope',sans-serif}
.listing-details .detail-lede{color:var(--ink);font-size:.95rem}
.listing-details .detail-facts{margin-top:.5rem}
.listing-page .listing-panel.source-panel{background:var(--panel)}
.listing-page .job-hiring{margin:16px 0 0;border-radius:20px}
.listing-page .claim-card{border-left:1px solid var(--line)}
/* The owner: Z seal when managed, open now, the week with today in bold (js/owner-hours.js), languages. */
.listing-page .owner-layer{border-left-width:1px}
.listing-page .owner-layer.is-managed{border-color:rgba(70,224,214,.45);background:linear-gradient(160deg,var(--teal-soft),transparent 55%),var(--panel)}
.owner-head{display:flex;align-items:center;margin:0 0 .6rem}
.owner-seal{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-right:.7rem;border:1.5px solid var(--teal);border-radius:11px;color:var(--teal);font:800 1rem/1 'Manrope',sans-serif;box-shadow:inset 0 0 14px rgba(70,224,214,.18)}
.listing-page .owner-head .kicker{margin:0}
.owner-head .owner-credit{margin:.15rem 0 0;font-size:.78rem}
.owner-hours div.is-today{font-weight:800}
.owner-hours div.is-today dt{color:var(--ink)}
.listing-page .owner-hours{max-width:none}
.listing-page .owner-hours+.owner-note{margin:-.4rem 0 .8rem}
/* Provenance labels (retention lever 2, Components/ProvenanceLine.razor): who stands behind a fact, and when. */
.owner-provenance{margin:0 0 .6rem;color:var(--muted);font-size:.78rem}
.listing-page .owner-hours+.owner-provenance{margin:-.4rem 0 .3rem}
.listing-page .owner-provenance+.owner-note{margin:0 0 .8rem}
.provenance time{white-space:nowrap}
/* The locator: our own drawing at the listing's coordinates (no map tiles). */
.locator{position:relative;height:170px;margin:0 0 .7rem;border-radius:14px;overflow:hidden;background:var(--ground-2)}
.locator svg{position:absolute;top:0;left:0;width:100%;height:100%}
.locator-grid line{stroke:var(--contour);stroke-width:1}
.locator-ring{fill:none;stroke:var(--teal);stroke-opacity:.35}
.locator-pin{fill:var(--teal)}
.locator-pulse{fill:none;stroke:var(--teal);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:locator-ping 2.6s ease-out infinite}
@keyframes locator-ping{from{opacity:.7;transform:scale(.4)}to{opacity:0;transform:scale(2.2)}}
.locator-coord{margin:0 0 .2rem;font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}
.locator-note{margin:0 0 .8rem;color:var(--muted);font-size:.78rem}
.listing-locator .secondary-button{display:inline-flex;align-items:center;min-height:44px}
@media (prefers-reduced-motion:reduce){.locator-pulse{animation:none;opacity:0}}
@media(min-width:720px){
.listing-head .listing-art{height:240px}
.listing-art .listing-glyph .glyph-ico{width:130px;height:130px}
.listing-head .detail-content{padding:26px 30px}
}
@media(min-width:900px){
.listing-columns{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-gap:22px;gap:22px;align-items:start}
.listing-head .listing-art{min-height:0}
}
/* ==== end of refresh R3 listing page ==== */

/* ==== Visible refresh R4: hero bands, stats, signals, jobs card, region tiles (docs/design/refresh-2026-11.md §3.2-3.3;
   prototype .hero, .stat, .signal, .jobs-card, .tiles). Components/PlaceHero.razor and HubSignals.razor; the skyline is
   Zunvi.UI css/skyline.css. Colours from the shared tokens, so Night and Dawn need no extra rule except the stars.
   Safari 13: margins, not flex gap; no inset; no aspect-ratio. The field is decorative and drifts only without
   reduced motion. */
.place-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.place-field{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}
.place-glow{position:absolute;border-radius:50%;opacity:.9;will-change:transform}
.place-glow-a{width:70%;height:120%;left:-18%;top:-45%;background:radial-gradient(closest-side,var(--glow-a),transparent);-webkit-animation:place-drift-a 26s ease-in-out infinite alternate;animation:place-drift-a 26s ease-in-out infinite alternate}
.place-glow-b{width:60%;height:110%;right:-16%;top:-10%;background:radial-gradient(closest-side,var(--glow-b),transparent);-webkit-animation:place-drift-b 32s ease-in-out infinite alternate;animation:place-drift-b 32s ease-in-out infinite alternate}
.place-glow-c{width:60%;height:90%;left:22%;bottom:-55%;background:radial-gradient(closest-side,var(--glow-c),transparent);-webkit-animation:place-drift-a 38s ease-in-out infinite alternate-reverse;animation:place-drift-a 38s ease-in-out infinite alternate-reverse}
.place-stars{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 72% 12%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 40% 32%,rgba(200,240,255,.6),transparent),radial-gradient(1px 1px at 88% 40%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 22% 62%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 60% 72%,rgba(255,255,255,.35),transparent)}
html[data-theme="light"] .place-stars{display:none}
.place-contours{position:absolute;top:0;left:0;width:100%;height:100%}
.place-contours path{fill:none;stroke:var(--contour);stroke-width:1.2}
@-webkit-keyframes place-drift-a{from{-webkit-transform:translate(0,0) scale(1)}to{-webkit-transform:translate(8%,6%) scale(1.12)}}
@keyframes place-drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(8%,6%) scale(1.12)}}
@-webkit-keyframes place-drift-b{from{-webkit-transform:translate(0,0) scale(1.05)}to{-webkit-transform:translate(-9%,5%) scale(.95)}}
@keyframes place-drift-b{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-9%,5%) scale(.95)}}
.place-hero-inner{position:relative;z-index:1;padding-top:28px;padding-bottom:24px}
.place-hero-inner.hub-narrow{max-width:900px}
.place-hero .breadcrumbs ol{margin-bottom:.6rem}
.place-kicker{display:block;margin:0;color:var(--teal);font:800 .66rem/1.2 'Manrope',sans-serif;letter-spacing:.18em}
.place-hero h1{margin:.35rem 0 .6rem;font:800 2.4rem/1.05 'Manrope',sans-serif;font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.035em}
.place-hero .hub-lede{margin-bottom:.4rem}
.place-hero+.hub-page{padding-top:24px}
.place-stats{display:flex;flex-wrap:wrap;margin:.4rem 0 .6rem;padding:0;list-style:none}
.place-stats li{margin:0 1.4rem .4rem 0}
.place-stats strong{display:block;font:800 1.5rem/1.1 'Manrope',sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.place-stats span{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.place-stat-jobs strong{color:var(--saffron-text)}
.place-hero .region-search{margin:.8rem 0 0}
.place-hero .region-heading{margin-top:1.6rem}
/* Town signals: each pill only when its data exists. */
.hub-signals{display:flex;flex-wrap:wrap;margin:.9rem 0 0;padding:0;list-style:none}
.hub-signals>li{margin:0 .5rem .5rem 0;max-width:100%}
.hub-signal{display:inline-block;min-height:44px;padding:.62rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font-size:.85rem;line-height:1.35;text-decoration:none}
.hub-signal i{display:inline-block;width:8px;height:8px;margin-right:.5rem;border-radius:50%;background:var(--teal);vertical-align:.08em}
.hub-signal small{color:var(--muted);font-size:inherit}
.hub-signal small a{color:var(--ink);text-underline-offset:3px}
.hub-signal-hire{border-color:rgba(244,188,92,.5)}
.hub-signal-hire i{background:var(--saffron)}
.hub-signal-lang i{background:var(--violet)}
a.hub-signal:hover{border-color:var(--saffron)}
a.hub-signal:focus-visible,.hub-signal a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* "Work near you" card: a jobs-pilot region with open jobs only. */
.jobs-card{display:flex;align-items:center;min-height:44px;margin:0 0 1.6rem;padding:14px 16px;border:1px solid rgba(244,188,92,.5);border-radius:18px;background:var(--panel);background:linear-gradient(100deg,var(--saffron-soft),transparent 70%),var(--panel);color:var(--ink);text-decoration:none}
.jobs-card:hover{border-color:var(--saffron)}
.jobs-card:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.jobs-card-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-right:12px;border-radius:12px;background:var(--saffron);color:var(--saffron-ink)}
.jobs-card-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jobs-card-text{min-width:0}
.jobs-card-text strong{display:block;font:800 1rem/1.25 'Manrope',sans-serif}
.jobs-card-text span{display:block;color:var(--muted);font-size:.85rem}
.jobs-card-arrow{margin-left:auto;padding-left:.6rem;color:var(--muted);font-size:1.3rem}
/* Region top categories: glyph tiles; the town names are the links. */
.region-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px;margin:0 0 1rem;padding:0;list-style:none}
.region-tile{display:flex;flex-direction:column;min-width:0;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.region-tile .region-tile-glyph{width:100%;height:96px;margin-bottom:10px}
.region-tile .region-tile-glyph .glyph-ico{width:56px;height:56px}
.region-tile-name{margin:0 0 .2rem;font:600 .98rem/1.22 'Manrope',sans-serif;letter-spacing:-.01em;color:var(--ink)}
.region-tile-count{margin:0;color:var(--muted);font-size:.78rem}
.region-tile-towns{margin:.5rem 0 0;padding:0;list-style:none}
.region-tile-towns a{display:flex;align-items:center;justify-content:space-between;min-height:32px;border-top:1px solid var(--line);color:var(--ink);font-size:.8rem;text-decoration:none}
.region-tile-towns a:hover{color:var(--teal)}
.region-tile-towns a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.region-tile-towns span{margin-left:.5rem;color:var(--muted);font-variant-numeric:tabular-nums}
.region-tile .region-more{margin:.4rem 0 0;font-size:.75rem}
.region-tiles>li{animation:motion-arrive 260ms cubic-bezier(.2,.8,.2,1) backwards}
@media(min-width:720px){.region-tiles{grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:14px;gap:14px}.region-tile .region-tile-glyph{height:120px}}
/* "Where this comes from": the region's credits and pages as one card (text unchanged, from the registry). */
.hub-page .region-summary{padding:.4rem 18px 16px;border:1px dashed var(--line-strong);border-radius:18px}
@media (prefers-reduced-motion:reduce){.place-glow{-webkit-animation:none;animation:none}.region-tiles>li{animation:motion-fade 200ms linear backwards}}
/* ==== end of refresh R4 ==== */