/* Pick the restaurant / bar / coffee — city pages (picktherestaurant.com/zurich). Builds on site.css's directory
   styles (.dir-page, .d-bar, .dcard). Three looks, one page: paper and paprika for restaurants, cream and roast for
   cafés, night for bars. The map is points of light, no tiles. Everything readable without motion or JS. */

@font-face{font-family:'Space Grotesk Variable';font-style:normal;font-display:swap;font-weight:300 700;src:url(/fonts/space-grotesk-latin-wght-normal.woff2) format('woff2')}

/* ---- tokens per vertical ------------------------------------------------------------------------- */
body.city{
  --bg:#fbf8f3;--surface:#fffdf9;--ink:#1b1714;--muted:#6d5f52;--faint:#a2968a;--line:#ece2d5;--chip:#f1e9df;
  --acc:#c4472a;--acc-2:#e9a23b;--acc-soft:rgb(196 71 42/.12);--ok:#1d8a52;--map:#f4ece1;--dot:#cdbfae;
  --display:'Fraunces Variable',Georgia,serif;--num:'Space Grotesk Variable','Inter Variable',ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
  background:var(--bg);color:var(--ink)}
body.city.v-coffee{--bg:#f6efe6;--surface:#fffaf3;--ink:#23170f;--muted:#74604f;--faint:#a8927f;--line:#e8dccd;--chip:#eee2d2;--acc:#9a4b1f;--acc-2:#c98b4a;--acc-soft:rgb(154 75 31/.12);--map:#efe4d5;--dot:#cbb8a2}
body.city.v-bar{color-scheme:dark;--bg:#0f0d12;--surface:#17141c;--ink:#f3ece2;--muted:#a89fb0;--faint:#776f80;--line:rgb(255 255 255/.09);--chip:rgb(255 255 255/.06);
  --acc:#ff5fa8;--acc-2:#f2e33d;--acc-soft:rgb(255 95 168/.16);--ok:#5be3a2;--map:#14111a;--dot:#463d52}
body.city .d-bar{background:color-mix(in oklab,var(--bg) 86%,transparent);border-bottom-color:var(--line)}
body.city .d-bar nav{background:var(--chip)}
body.city .d-bar nav a{color:var(--muted)}
body.city .d-bar nav a.on{background:var(--ink);color:var(--bg)}
body.city .d-brand em,body.city h1 em,body.city .c-own h2 em{color:var(--acc)}
body.city .d-get{background:var(--acc);box-shadow:0 10px 24px -12px var(--acc)}
body.v-bar .d-get{color:#1a0010}
body.city ::selection{background:var(--acc);color:var(--bg)}
body.city :focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:8px}

/* ---- hero: the question, the live numbers, the map ---------------------------------------------- */
.c-hero{grid-area:hero;min-width:0;padding:clamp(28px,4.4vw,64px) 0 clamp(18px,2vw,28px)}
.c-eye{margin:0 0 18px;font:600 .74rem/1 ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.06em;color:var(--faint)}
.c-eye a{text-decoration:none}
.c-hero h1{margin:0;max-width:15ch;font:600 clamp(38px,4.8vw,82px)/.96 var(--display);letter-spacing:-.045em;text-wrap:balance;font-variation-settings:'SOFT' 40;animation:c-rise 1.1s var(--ease) both}
.c-hero h1 em{font-style:italic;font-weight:400;font-variation-settings:'SOFT' 100,'WONK' 1}
.c-lead{margin:22px 0 0;max-width:34em;font-size:clamp(17px,1.35vw,20px);color:var(--muted);text-wrap:pretty;animation:c-rise 1.1s var(--ease) .08s both}
.c-stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin:30px 0 0;padding:0;animation:c-rise 1.1s var(--ease) .16s both}
.c-stat{display:flex;align-items:baseline;gap:8px;color:var(--muted);font-size:.92rem}
.c-stat b{font:600 clamp(28px,3vw,44px)/1 var(--num);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.c-on b{color:var(--acc)}
.c-on i{align-self:center;width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 var(--acc);animation:c-ping 2.2s ease-out infinite}
.c-clock b{font-size:clamp(20px,2vw,28px)}
.c-note{margin:18px 0 0;font-size:.84rem;color:var(--faint)}

.c-map{position:relative;margin:0;aspect-ratio:1;width:100%;border-radius:32px;overflow:hidden;background:radial-gradient(70% 70% at 50% 50%,color-mix(in oklab,var(--acc) 7%,var(--map)),var(--map));box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -60px rgb(40 20 10/.55);animation:c-fade 1.4s var(--ease) both}
.v-bar .c-map{box-shadow:inset 0 0 0 1px var(--line),0 40px 90px -50px rgb(255 95 168/.35)}
.c-svg{display:block;width:100%;height:100%}
.m-ring{fill:none;stroke:color-mix(in oklab,var(--ink) 26%,transparent);stroke-width:1.5;stroke-dasharray:1 6;stroke-linecap:round}
.v-bar .m-ring{stroke:rgb(255 255 255/.24)}
.m-area{fill:color-mix(in oklab,var(--acc) 4%,transparent);stroke:color-mix(in oklab,var(--acc) 30%,transparent);stroke-width:1.2;stroke-dasharray:6 6}
.m-rl{font:500 22px var(--num);fill:var(--faint);letter-spacing:.02em}
.d{fill:var(--dot);transform-box:fill-box;transform-origin:center;transition:opacity .45s var(--ease),fill .3s,transform .45s var(--spring);animation:c-pop .9s var(--ease) both}
.d.s-open{fill:var(--acc);stroke:color-mix(in oklab,var(--acc) 30%,transparent);stroke-width:8}
.d.s-later{fill:color-mix(in oklab,var(--acc-2) 70%,var(--dot))}
.d.off{opacity:.13}
.d.hot{transform:scale(2.4);opacity:1;fill:var(--ink);stroke:var(--acc);stroke-width:3}
.v-bar .d.hot{fill:#fff}
.b0{animation-delay:.05s}.b1{animation-delay:.12s}.b2{animation-delay:.19s}.b3{animation-delay:.26s}.b4{animation-delay:.33s}.b5{animation-delay:.4s}.b6{animation-delay:.47s}.b7{animation-delay:.54s}.b8{animation-delay:.61s}.b9{animation-delay:.68s}
.m-dots .s-open{animation:c-pop .9s var(--ease) both,c-breathe 3.6s ease-in-out 1.4s infinite}
.m-lm path{fill:var(--ink);opacity:.82}
.m-lm{cursor:pointer}
.m-lm text{font:650 22px 'Inter Variable',ui-sans-serif,system-ui,sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--map);stroke-width:6px;stroke-linejoin:round;dominant-baseline:central;transition:opacity .25s}
.m-lm.far text{opacity:0;pointer-events:none}
.m-lm:hover text{fill:var(--acc)}
.m-lm.on path{fill:var(--acc);opacity:1}
.m-lm.on text{fill:var(--acc)}

/* ---- filters: chips that read like a sentence --------------------------------------------------- */
.c-filters{grid-area:filters;display:grid;gap:8px;min-width:0;padding:14px 0;border-block:1px solid var(--line)}
.c-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.c-scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent);padding-right:40px}
.c-scroll::-webkit-scrollbar{display:none}
.c-lab{margin-right:4px;font-size:.78rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.chip{position:relative;flex:0 0 auto}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--chip);color:var(--muted);font-size:.86rem;font-weight:600;white-space:nowrap;cursor:pointer;user-select:none;transition:background .25s,color .25s,transform .35s var(--spring)}
.chip span b{font:600 .72rem var(--num);opacity:.6}
.chip:hover span{color:var(--ink)}
.chip input:checked+span{background:var(--ink);color:var(--bg);transform:translateY(-1px)}
.chip input:focus-visible+span{outline:2.5px solid var(--acc);outline-offset:2px}
.chip input:disabled+span{opacity:.38;cursor:default}
.c-sort{justify-content:flex-end}
.c-apply{padding:7px 16px;border:0;border-radius:999px;background:var(--acc);color:#fff;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.js .c-apply{display:none}

/* ---- the list: one ticket per place -------------------------------------------------------------- */
/* the explorer: the list, and beside it the map that stays in view */
/* the stage: words on the left, the live map on the right, staying in view while the list goes by */
.c-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,46%);grid-template-areas:'hero map' 'filters map' 'main map';grid-template-rows:auto auto 1fr;column-gap:clamp(24px,3.4vw,60px);max-width:1480px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.c-side{grid-area:map;position:sticky;top:64px;align-self:start;padding:clamp(18px,2.6vw,36px) 0 24px}
.c-sites{margin-bottom:22px}
.c-sites .c-eye{margin:0 0 10px}
.c-sites .d-grid{padding:0}
.c-main{grid-area:main;min-width:0;padding:22px 0 40px}
.c-count{margin:0 0 14px;font:600 .8rem var(--num);letter-spacing:.04em;color:var(--faint)}
.pl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px}
.pl{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 14px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 18px 40px -34px rgb(40 20 10/.6);transition:transform .45s var(--spring),box-shadow .35s;animation:c-rise .7s var(--ease) both}
.pl:hover,.pl.hot{transform:translateY(-3px);box-shadow:0 0 0 1px color-mix(in oklab,var(--acc) 40%,var(--line)),0 26px 50px -30px color-mix(in oklab,var(--acc) 55%,transparent)}
.pl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pl-n{margin:0;font:600 1.24rem/1.15 var(--display);letter-spacing:-.02em;text-wrap:balance}
.pl-st{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:4px 10px;border-radius:999px;background:var(--chip);font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap}
.pl-st i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55}
.s-open .pl-st{background:var(--acc-soft);color:var(--acc)}
.s-open .pl-st i{opacity:1;animation:c-ping 2.2s ease-out infinite;box-shadow:0 0 0 0 var(--acc)}
.s-later .pl-st{background:color-mix(in oklab,var(--acc-2) 18%,transparent);color:color-mix(in oklab,var(--acc-2) 60%,var(--ink))}
.s-unknown .pl-st{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint)}
.pl-k{margin:0;font-size:.9rem;font-weight:600;color:var(--ink)}
.pl-a,.pl-h{margin:0;font-size:.86rem;color:var(--muted)}
.pl-h{font:500 .76rem/1.4 ui-monospace,'SF Mono',Menlo,monospace;color:var(--faint);overflow-wrap:anywhere}
.pl-tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.pl-tags li{padding:2px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:.72rem;font-weight:600;color:var(--muted)}
.pl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.pl-web{font-size:.84rem;font-weight:650;text-decoration:none;color:var(--ink)}
.pl-web:hover{color:var(--acc)}
.pl-mine{display:inline-grid;margin-left:auto;padding:6px 12px;border-radius:12px;text-decoration:none;text-align:right;transition:background .25s}
.pl-mine span{font-size:.82rem;font-weight:700;color:var(--acc)}
.pl-mine span::after{content:'→';display:inline-block;margin-left:.3em;transition:transform .35s var(--spring)}
.pl-mine small{font-size:.68rem;color:var(--faint)}
.pl-mine:hover{background:var(--acc-soft)}
.pl-mine:hover span::after{transform:translateX(4px)}
.pl-rep{border:0;background:none;padding:0;font:inherit;font-size:.72rem;color:var(--faint);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pl-rep:hover{color:var(--ink)}
.pl-form{display:grid;gap:8px;margin-top:6px;padding:12px;border-radius:14px;background:var(--chip);font-size:.84rem}
.pl-form label{display:flex;gap:8px;align-items:center;cursor:pointer}
.pl-form button{justify-self:start;padding:6px 14px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font:inherit;font-weight:700;cursor:pointer}
.pl-form p{margin:0;color:var(--muted)}
.c-empty{padding:40px 0;text-align:center;color:var(--muted)}
.c-more{display:block;width:max-content;margin:26px auto 0;padding:12px 24px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none}

/* ---- for owners: "your website is half done" ---------------------------------------------------- */
.c-own{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:clamp(24px,4vw,56px);align-items:center;margin:10px clamp(16px,4vw,48px) 40px;padding:clamp(26px,4vw,52px);border-radius:32px;background:#1b1714;color:#fbf8f3;overflow:hidden}
.v-bar .c-own{background:linear-gradient(135deg,#25122a,#120d18);box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
.c-own h2{margin:0;font:600 clamp(28px,3.2vw,48px)/1.04 var(--display);letter-spacing:-.03em;text-wrap:balance}
.c-own h2 em{display:block;font-style:italic;font-weight:400;font-variation-settings:'SOFT' 100,'WONK' 1;color:var(--acc-2)!important}
.c-own p{margin:16px 0 0;max-width:34em;opacity:.72}
.c-own-a{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
.c-ghost{color:#fbf8f3;font-weight:650;text-decoration:none;opacity:.8}
.c-ghost:hover{opacity:1}
.c-own-demo{border-radius:18px;background:#fbf8f3;color:#1b1714;box-shadow:0 30px 60px -30px rgb(0 0 0/.6);overflow:hidden;transform:rotate(-1.6deg)}
.cd-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f1e9df;font:500 .72rem ui-monospace,'SF Mono',Menlo,monospace;color:#8a7d70}
.cd-bar i{width:8px;height:8px;border-radius:50%;background:#dccdbc}
.cd-bar span{margin-left:8px}
.cd-body{display:grid;gap:10px;padding:22px 22px 26px}
.cd-body b{display:block;height:12px;border-radius:6px;background:#e9dccc;transform-origin:left;animation:c-type 6s var(--ease) infinite}
.cd-body .cd-1{width:62%;height:26px;background:#1b1714;animation-delay:0s}
.cd-body .cd-2{width:84%;animation-delay:.5s}
.cd-body .cd-3{width:48%;animation-delay:1s}
.cd-body .cd-4{width:70%;animation-delay:1.5s}
.cd-pill{justify-self:start;width:120px;height:30px;margin-top:6px;border-radius:999px;background:var(--acc);animation:c-type 6s var(--spring) 2s infinite}

/* ---- footer ------------------------------------------------------------------------------------------ */
.c-foot{flex-wrap:wrap;color:var(--faint);border-top-color:var(--line)}
.c-foot a{color:var(--muted)}
.c-langs{display:flex;gap:10px}
.c-langs a{text-decoration:none;font-weight:700}
.c-langs a.on{color:var(--acc)}

/* ---- motion ---------------------------------------------------------------------------------------- */
@keyframes c-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes c-fade{from{opacity:0;transform:scale(.97)}}
@keyframes c-pop{from{opacity:0;transform:scale(0)}}
@keyframes c-breathe{0%,100%{stroke-width:8}50%{stroke-width:15}}
@keyframes c-ping{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--acc) 55%,transparent)}80%,100%{box-shadow:0 0 0 10px transparent}}
@keyframes c-type{0%{transform:scaleX(0);opacity:0}12%{opacity:1}22%,82%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ---- small screens ------------------------------------------------------------------------------------ */
@media (max-width:960px){
  .c-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:'hero' 'map' 'filters' 'main';grid-template-rows:auto}
  .c-side{position:relative;top:0;padding:0 0 18px;max-width:600px;width:100%;justify-self:center}
  .c-own{grid-template-columns:1fr}
  .c-own-demo{display:none}
  .c-sort{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .city *,.city *::before,.city *::after{animation:none!important;transition:none!important}
}

/* ---- the map: real geography under the points (public/site/geo, from OpenStreetMap), zoom, clusters ---------- */
body.city{--g-water:#cfe0ea;--g-river:#bcd3e2;--g-street:rgb(110 86 62/.13);--g-road:rgb(110 86 62/.22);--g-rail:rgb(80 62 46/.42)}
body.city.v-coffee{--g-water:#d4e1e6;--g-river:#c3d6df;--g-street:rgb(105 74 50/.13);--g-road:rgb(105 74 50/.22);--g-rail:rgb(80 55 38/.42)}
body.city.v-bar{--g-water:#1c2140;--g-river:#232a52;--g-street:rgb(255 255 255/.05);--g-road:rgb(255 255 255/.09);--g-rail:rgb(255 255 255/.2)}
.c-map{width:min(100%,calc(100svh - 120px));margin-inline:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.c-map.zoomed{touch-action:none;cursor:grab}
.c-map.dragging{cursor:grabbing}
.c-svg{--z:1;--zd:1;--u:1.6} /* --u: map units per screen pixel (places.js measures it) */
.m-bg{fill:transparent}
.m-geo path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.m-geo .g-water{fill:var(--g-water);fill-rule:evenodd;stroke:none}
.m-geo .g-street{stroke:var(--g-street);stroke-width:1px}
.m-geo .g-road{stroke:var(--g-road);stroke-width:1.9px}
.m-geo .g-river{stroke:var(--g-river);stroke-width:2.6px}
.m-geo .g-rail{stroke:var(--g-rail);stroke-width:1.1px;stroke-dasharray:5 4}
.v-bar .m-geo .g-water{filter:drop-shadow(0 0 18px rgb(95 110 255/.18))}
.m-geo{animation:c-fade 1.6s var(--ease) both}
.m-ring{vector-effect:non-scaling-stroke;stroke-width:1.6px}
.m-rl{font-size:calc(11px * var(--u) / var(--z))}
/* names beside the points when the map is close (places.js names()): the same size on screen at every zoom */
.m-names text{font:560 calc(12.5px * var(--u) / var(--z)) 'Inter Variable',ui-sans-serif,system-ui,sans-serif;fill:var(--ink);opacity:.82;paint-order:stroke;stroke:var(--map);stroke-width:calc(4px * var(--u) / var(--z));stroke-linejoin:round;dominant-baseline:central;cursor:pointer;animation:nm-in .45s var(--ease) both}
.m-names text.open{fill:var(--acc);opacity:1;font-weight:680}
.m-names text:hover{fill:var(--acc);opacity:1}
@keyframes nm-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.m-names text{animation:none}}
.d{transform:scale(calc(var(--u) / 1.6 / var(--zd)))}
.d.hot{transform:scale(calc(var(--u) * 1.5 / var(--zd)))}
.d.in-cl{opacity:0;pointer-events:none}
.m-lm path{transform-box:fill-box;transform-origin:center;transform:scale(calc(var(--u) / 1.6 / var(--z)))}
.m-lm text{font-size:calc(14px * var(--u) / var(--z));stroke-width:calc(6px * var(--u) / var(--z))}
.cl{cursor:pointer;animation:c-pop .55s var(--spring) both}
.cl circle{fill:color-mix(in oklab,var(--ink) 86%,var(--acc) 14%);stroke:color-mix(in oklab,var(--map) 70%,transparent);stroke-width:3px;vector-effect:non-scaling-stroke;transition:fill .3s,stroke-width .3s}
.cl .cl-ring{fill:none;stroke:var(--acc);stroke-width:3.5px;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}
.v-bar .cl circle{fill:color-mix(in oklab,var(--surface) 70%,var(--acc) 30%);stroke:rgb(255 255 255/.08)}
.v-bar .cl .cl-ring{stroke:var(--acc);filter:drop-shadow(0 0 6px var(--acc))}
.cl text{font-family:var(--num);font-weight:700;font-size:calc(10.5px * var(--u) / var(--z));fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.cl:hover circle:not(.cl-ring),.cl.hot circle:not(.cl-ring){fill:var(--acc)}
.m-ctl{position:absolute;top:14px;right:14px;display:grid;gap:4px;padding:4px;border-radius:14px;background:color-mix(in oklab,var(--surface) 88%,transparent);box-shadow:0 0 0 1px var(--line),0 10px 24px -14px rgb(0 0 0/.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.m-ctl button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:none;color:var(--ink);font:600 1.2rem/1 var(--num);cursor:pointer;transition:background .2s}
.m-ctl button:hover{background:var(--chip)}
.m-ctl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.m-hint{position:absolute;left:50%;bottom:16px;translate:-50% 0;margin:0;padding:8px 14px;border-radius:999px;background:color-mix(in oklab,var(--ink) 86%,transparent);color:var(--bg);font-size:.8rem;font-weight:600;white-space:nowrap;pointer-events:none;animation:c-rise .4s var(--ease) both}
.m-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:12px;font-size:.78rem;color:var(--muted)}
.m-key span{display:inline-flex;align-items:center;gap:6px}
.m-key i{width:9px;height:9px;border-radius:50%;background:var(--dot)}
.m-key .k-open i{background:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.m-key .k-later i{background:color-mix(in oklab,var(--acc-2) 70%,var(--dot))}
@media (max-width:960px){.c-map{width:100%}.m-ctl{top:10px;right:10px}}

/* ---- phones: the header gives its second row back while you read the list ---------------------------------- */
@media (max-width:700px){
  body.city .d-bar nav{transition:max-height .35s var(--ease),opacity .25s,margin .35s var(--ease);max-height:60px;overflow:hidden}
  body.city.bar-tucked .d-bar nav{max-height:0;opacity:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.cl,.m-geo,.m-hint{animation:none}}

/* ---- the shortcut to the visitor's own city, on a directory's home (src/site/dirhome.ts; the rest is dirhome.css) */
.home .h-go{display:inline-flex;align-items:center;gap:14px;margin:26px 0 4px;padding:10px 12px 10px 10px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:650;box-shadow:0 18px 40px -22px color-mix(in oklab,var(--acc) 70%,transparent);animation:c-rise 1.1s var(--ease) .2s both;transition:transform .45s var(--spring),box-shadow .35s}
.h-go:hover{transform:translateY(-2px);box-shadow:0 26px 50px -22px color-mix(in oklab,var(--acc) 85%,transparent)}
.h-go-k{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--acc);color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.v-bar .h-go-k{color:#1a0010}
.h-go-k i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:c-ping 2.2s ease-out infinite}
.h-go b{display:grid;place-items:center;width:30px;height:30px;margin-left:2px;border-radius:50%;background:color-mix(in oklab,var(--bg) 14%,transparent);transition:transform .45s var(--spring)}
.h-go:hover b{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.h-go,.h-go-k i{animation:none!important}}
@media (max-width:560px){
  .home .h-go{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;width:100%;padding:12px 12px 14px 14px;border-radius:24px}
  .home .h-go .h-go-k{grid-column:1/-1;justify-self:start}
}