/* Hallmark · custom: curated second-hand guide, structure shared by two skins (A stamp album, B street poster wall) · type: Rubik heads, Heebo text (by request) (impeccable roll seed:a8895bd37a166e15) · scope: site · job: discover and visit · nav: top bar, wordmark + four links + language · footer: interests, cities, policy over the data line · signature: each shop is one object (stamp or poster) carrying its reason to go */
:root { --font-text: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-head: 'Rubik', 'Heebo', system-ui, sans-serif; --skip-bg: #fbfaf7; --skip-fg: #14161c; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: var(--font-text); font-size: 17px; line-height: 1.55; overflow-x: clip; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; line-height: 1.1; text-wrap: balance; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 3000; padding: 10px 16px; background: var(--skip-bg); color: var(--skip-fg); font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.explore, .mini-map, .mv-map { isolation: isolate; z-index: 0; } /* keep Leaflet's panes (z 200-1000) below the sticky header and sheets */
.leaflet-container { direction: ltr; font-family: var(--font-text); }
.pin-wrap { background: none; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* page frame */
.top { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 32px; padding: 12px var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.top-nav { display: flex; gap: 4px 22px; overflow-x: auto; scrollbar-width: none; }
.top-nav a { text-decoration: none; white-space: nowrap; }
.lang { margin-inline-start: auto; text-decoration: none; }
main { display: block; }
.sec, .landing, .profile, .prose { padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; }
.sec { padding-top: 56px; }
.sec-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 22px; }
.sec-h p { margin: 0; max-width: 60ch; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: 14px; }
.crumbs li + li::before { content: '/'; margin-inline-end: 6px; opacity: .6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* home */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; gap: 5vw; align-items: center; padding: 56px var(--gutter) 56px; max-width: var(--max); margin-inline: auto; }
.hero-shout { display: none; }
.hero-copy { position: relative; min-width: 0; }
.lede { font-size: 19px; max-width: 46ch; margin: 22px 0 28px; }
.search-plate { display: flex; gap: 6px; padding: 6px; max-width: 640px; }
.search-plate input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 12px; font-size: 17px; }
.search-plate input:focus { outline: none; }
.search-plate:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus { outline: none; }
.search-plate button { border: 0; cursor: pointer; padding: 0 24px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.quick a { text-decoration: none; }
.hero-cards { min-width: 0; }
.hero-cards .strip { position: relative; flex-wrap: nowrap; justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.strip { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-end; }
.series-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.series { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; padding: 20px; text-decoration: none; }
.sheet { grid-row: span 2; display: grid; grid-template-columns: repeat(2, 40px); gap: 3px; }
.mini { height: 48px; }
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.place { padding: 20px; }
.place-city { display: flex; justify-content: space-between; align-items: baseline; text-decoration: none; }
.place-hoods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.place-hoods a { text-decoration: none; }
.mapband { display: flex; justify-content: space-between; align-items: center; margin: 64px var(--gutter) 0; padding: 30px; text-decoration: none; }
.arrow { width: 1.1em; height: 1.1em; flex: none; }
html[dir='ltr'] .arrow { transform: scaleX(-1); }

/* cards (stamp in A, poster in B) */
.card { position: relative; display: inline-flex; flex-direction: column; text-decoration: none; }
.paper { display: flex; flex-direction: column; flex: 1; }
.card-inscr { position: absolute; top: 8px; inset-inline-start: 10px; z-index: 1; }
.card-vis { position: relative; overflow: hidden; display: block; }
.card-body { display: grid; gap: 2px; }
.card-kicker, .card-meta { display: block; }
.card-name { display: block; }
.card-why { display: block; }
.card-sponsored { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; }
.card-s { width: 150px; } .card-m { width: 232px; } .card-l { width: 280px; } .card-xl { width: 100%; max-width: 440px; }

/* store profile */
.profile { padding-top: 28px; padding-bottom: 40px; }
.profile-head { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 6vw; align-items: start; }
.profile-vis { position: relative; }
.gallery:empty { display: none; }
.profile-vis { display: flex; flex-direction: column; }
/* Google photos are printed into the stamps: the photo sits inside the series-colour frame, under the inscription band */
.vis-photo { position: absolute; top: 28px; inset-inline: 8px; bottom: 8px; width: calc(100% - 16px); height: calc(100% - 36px); object-fit: cover; z-index: 1; }
.card.has-photo .card-glyph { display: none; }
.card-inscr { top: 7px; }
.gallery { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.g-photo { margin: 0; width: calc((100% - 24px) / 3); }
.g-frame { display: block; padding: 6px; position: relative; }
.g-frame img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.photo-note { position: absolute; top: 8px; inset-inline-end: 8px; font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 3px; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-weight: 600; margin: 14px 0 0; }
.kicker > span + span::before { content: ''; display: inline-block; width: 1px; height: .9em; margin-inline-end: 14px; vertical-align: -.1em; background: currentColor; opacity: .4; }
.dot { display: inline-block; vertical-align: -1px; width: 12px; height: 12px; border-radius: 2px; background: var(--series); }
.intro { font-size: 22px; line-height: 1.45; max-width: 36ch; margin: 18px 0 8px; }
.why { margin-top: 48px; }
.why p { margin: 0; }
.profile-body { display: grid; grid-template-columns: 1fr 380px; gap: 5vw; margin-top: 40px; }
.read { max-width: 66ch; font-size: 18px; line-height: 1.7; }
.read h2 { font-size: 24px; margin: 34px 0 12px; }
.read h2:first-child { margin-top: 0; }
.specialties { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sources { margin-top: 30px; font-size: 15px; }
.sources summary { cursor: pointer; font-weight: 700; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 4px; font-weight: 700; line-height: 1; }
.sources[open] summary::before { content: '−'; }
.sources ul { padding-inline-start: 20px; }
.facts { align-self: start; position: sticky; top: 84px; padding: 24px; }
.facts h2 { font-size: 20px; margin-bottom: 8px; }
.facts dl { margin: 0; }
.facts dl div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 11px 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.g-hours { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.g-src { font-size: 12px; opacity: .7; }
.facts-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn { display: inline-block; text-decoration: none; padding: 12px 18px; font-family: var(--font-head); font-weight: 700; }
.mini-map { height: 220px; margin-top: 18px; }
.related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }
.related a { text-decoration: none; }

/* landing */
.landing { padding-top: 28px; padding-bottom: 40px; }
.landing-head h1 { font-size: clamp(60px, 10vw, 150px); line-height: .95; }
.landing-head .lede { margin-bottom: 18px; }
.landing-intro { max-width: 62ch; margin: 0 0 20px; line-height: 1.6; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pills a { text-decoration: none; }
.text-link { font-weight: 700; }
.landing .sec { padding-inline: 0; padding-top: 32px; }

/* explorer */
.explore { --mp-w: min(clamp(400px, 34vw, 540px), calc(100% - 36px)); position: relative; height: calc(100vh - 62px); min-height: 560px; overflow: hidden; }
.map-ground { position: absolute; inset: 0; }
.map-panel { position: absolute; z-index: 800; top: 18px; inset-inline-start: 18px; bottom: 18px; width: var(--mp-w); display: flex; flex-direction: column; overflow: hidden; }
.map-search { padding: 14px; }
.map-search input { width: 100%; padding: 13px 14px; border: 0; }
.map-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.chip { cursor: pointer; border: 0; padding: 7px 12px; font-size: 13.5px; font-weight: 700; }
.chip:disabled { opacity: .38; cursor: not-allowed; }
.map-count { margin: 0; padding: 0 16px 10px; font-size: 14px; }
.map-list { list-style: none; margin: 0; padding: 6px 8px 14px; overflow-y: auto; flex: 1; }
.map-list a { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: start; text-decoration: none; padding: 10px 8px; }
.ml-thumb { display: grid; place-items: center; align-self: stretch; min-height: 60px; }
.ml-text { display: grid; gap: 1px; min-width: 0; }
.ml-text small { font-size: 13px; opacity: .75; }
/* category on each map-list row: the colour alone did not say "books" or "clothing" (Andrey, 2026-11-09) */
.ml-cat { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2, currentColor); }
.ml-cat::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--series, currentColor); }
.ml-text em { font-style: normal; font-size: 14px; line-height: 1.4; }
.pin { display: grid; place-items: center; width: 30px; height: 34px; transition: transform .15s; }
.pin.on { transform: scale(1.35); }
/* hovering a pin grows it a little and lifts it above its neighbours, so it reads as clickable; nothing opens until a click */
@media (hover: hover) {
  .pin-wrap { cursor: pointer; }
  .leaflet-marker-icon.pin-wrap:hover { z-index: 1000 !important; }
  .pin-wrap:hover .pin:not(.on) { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .pin { transition: none; } }
.near-me { position: absolute; z-index: 800; bottom: 28px; inset-inline-end: 18px; cursor: pointer; padding: 12px 18px; border: 0; }

/* reading pages */
.prose { max-width: 760px; padding-top: 28px; padding-bottom: 60px; font-size: 18px; line-height: 1.7; }
.prose.wide { max-width: var(--max); }
.prose h1 { font-size: clamp(40px, 6vw, 72px); margin-bottom: 18px; }
.prose h2 { font-size: 26px; margin: 34px 0 10px; }
.link-cols { columns: 3 220px; padding: 0; list-style: none; }
.link-cols li { break-inside: avoid; padding: 3px 0; }

/* footer */
.foot { margin-top: 80px; padding: 56px var(--gutter) 40px; }
.foot-brand { display: grid; gap: 6px; margin: 0; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: 32px; margin: 32px 0; }
.foot-cols div { display: grid; gap: 7px; align-content: start; }
.foot-cols h2 { font-size: 17px; margin-bottom: 4px; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
.foot-base { font-size: 14px; margin: 0; padding-top: 18px; max-width: 110ch; }

@media (max-width: 1100px) {
  .series-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-body { grid-template-columns: 1fr 320px; }
}
@media (max-width: 860px) {
  .top { gap: 16px; }
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .hero-cards .strip { flex-wrap: wrap; }
  .stack { flex-direction: row; }
  .series-grid { grid-template-columns: 1fr; }
  .profile-head, .profile-body { grid-template-columns: 1fr; }
  .profile-vis { max-width: 380px; }
  .facts { position: static; }
  .explore { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .map-ground { position: relative; height: 52vh; }
  .map-panel { position: relative; inset: auto; width: auto; margin: -24px 10px 0; max-height: none; }
  .map-list { overflow: visible; }
  .near-me { top: 12px; bottom: auto; inset-inline-end: auto; inset-inline-start: 12px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .card-m { width: calc(50% - 11px); }
  .card-l { width: min(280px, 100%); }
  .lang { display: none; }
}
/* sections nested in a profile or landing page share their parent's gutter */
.profile .sec, .landing .sec { padding-inline: 0; max-width: none; }
/* first-visit guide: a fixed card, non-modal, dismissed once */
.onb { position: fixed; z-index: 1500; inset-block-end: 20px; inset-inline-end: 20px; width: min(400px, calc(100vw - 40px)); padding: 22px 24px 20px; }
.onb[hidden] { display: none; }
.onb h2 { font-size: 22px; margin-bottom: 12px; }
.onb ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.onb li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.onb-n { display: grid; place-items: center; width: 30px; height: 30px; font: 800 15px/1 var(--font-head); }
.onb b { font-family: var(--font-head); font-weight: 700; }
.onb p { margin: 2px 0 0; font-size: 15px; line-height: 1.45; }

/* profile head: stamp beside title and its gummed back (facts) */
.profile-title .facts { position: static; margin-top: 26px; }
.profile-body { grid-template-columns: 1fr 340px; }
.profile-map .mini-map { margin-top: 0; height: 300px; }
.profile-vis .card-why { font-size: 16px; }
/* landing: se-tenant blocks per neighbourhood */
.sheet-block { margin-top: 44px; }
.sheet-h { position: relative; display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.sheet-h h2 { font-size: clamp(28px, 3.2vw, 44px); }
.sheet-h a { text-decoration: none; }
.sheet-count { font-size: 15px; }
.postmark.on-sheet { position: absolute; width: 150px; inset-inline-end: 0; top: -26px; }
.place-other .place-city { pointer-events: none; }
.onb .postmark, .onb-stamp { display: none; }
@media (max-width: 860px) {
  .top { flex-wrap: wrap; row-gap: 6px; padding-block: 10px; }
  .top-nav { order: 3; flex: 1 0 100%; flex-wrap: wrap; overflow: visible; gap: 2px 18px; }
  .profile-body { grid-template-columns: 1fr; }
  .postmark.on-sheet { width: 110px; top: -14px; }
}
@media (max-width: 480px) { .lang { display: inline-block; } }
.card-vis { padding: 10px; }
.card.has-photo .photo-note { display: none; }

/* map storefront card: physical right edge; in RTL it sits beside the list panel, which is on the right there */
.map-card { position: absolute; z-index: 800; top: 18px; right: 18px; width: 300px; overflow: hidden; background: var(--page); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow, rgba(0,0,0,.2)); }
/* Hebrew: the results panel is on the right, so the card sits just beyond it (same width source as the panel, so they never overlap) */
[dir='rtl'] .map-card { right: calc(18px + var(--mp-w) + 12px); }
.map-card[hidden] { display: none; }
.mc-vis { position: relative; height: 190px; display: grid; place-items: center; background-color: var(--series, var(--accent)); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.12) 0 1px, transparent 1px 6px); color: #fff; }
.mc-glyph { font: 800 64px var(--font-head); opacity: .9; }
.mc-soon { position: absolute; inset-inline: 10px; bottom: 8px; text-align: center; font-size: 12.5px; opacity: .9; }
.map-card.has-photo .mc-glyph, .map-card.has-photo .mc-soon { display: none; }
.mc-photo { position: absolute; inset: 0; }
.mc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-credit { font-size: 11.5px; padding: 3px 12px 0; opacity: .7; min-height: 14px; }
.mc-credit a { color: inherit; }
.mc-body { padding: 6px 14px 14px; display: grid; gap: 4px; }
.mc-body h2 { margin: 0; font-size: 19px; }
.mc-body p { margin: 0; font-size: 14px; line-height: 1.4; }
.mc-place { opacity: .75; }
.mc-open { justify-self: start; margin-top: 6px; font-weight: 700; }

.map-cities { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px 12px; }
.mc-label { font-size: 13px; font-weight: 700; opacity: .7; }
.chip-city.on { background: var(--accent-fill, var(--accent)); color: #fff; }
.chip-city small { opacity: .7; margin-inline-start: 2px; }
.ml-online { outline: 1px dashed currentColor; outline-offset: -4px; }
.mc-how { opacity: .75; font-size: 13px !important; }
.map-card.is-online .mc-vis { height: 110px; }
.map-card.is-online .mc-soon { display: none; }

/* ============ interaction layer: premium hover / press, touch aware ============ */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --star: #f5c13a; }
button, a.btn, .mc-open, input, label.opt, .seg label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn, .search-plate button, .mc-open, .fbtn, .nearbtn, .tag, .fshow, .fclear, .fx, .quick a, .pills a, .related a, .mapband {
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease);
}
.btn, .search-plate button, .mc-open, .fbtn, .nearbtn, .tag, .fshow, .fclear, .fx { cursor: pointer; }
@media (hover: hover) {
  .btn:hover, .search-plate button:hover, .mc-open:hover, .fshow:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 8px 18px var(--shadow); }
  .quick a:hover, .pills a:hover, .related a:hover { transform: translateY(-1px); }
  .mapband:hover { transform: translateY(-2px); box-shadow: 0 14px 30px var(--shadow); }
}
.btn:active, .search-plate button:active, .mc-open:active, .fbtn:active, .nearbtn:active, .tag:active, .fshow:active, .fx:active, .quick a:active, .pills a:active, .related a:active, .mapband:active {
  transform: scale(.97); filter: brightness(.94); transition-duration: .06s; box-shadow: none;
}
@media (pointer: coarse) {
  .btn, .mc-open, .fbtn, .nearbtn, .tag, .fshow, .fx { min-height: 44px; }
  .quick a, .pills a, .related a { padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.ic { width: 18px; height: 18px; flex: none; }

/* map toolbar */
.tb { display: flex; gap: 8px; padding: 14px 14px 8px; }
.tb .map-search { position: relative; flex: 1; min-width: 0; padding: 0; }
.map-search .ic { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; opacity: .5; pointer-events: none; transition: opacity .2s, color .2s; }
.map-search input { height: 46px; padding-inline: 42px 14px; font-size: 15px; transition: box-shadow .25s var(--ease), background-color .2s; box-shadow: 0 0 0 1px transparent; }
.map-search input::placeholder { color: #6f6a62; opacity: 1; }
@media (hover: hover) { .map-search input:hover { box-shadow: 0 0 0 1px var(--rule-strong, rgba(255,255,255,.26)); } }
.map-search input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent), 0 10px 24px var(--shadow); }
.map-search:focus-within .ic { opacity: 1; color: var(--accent); }
.fbtn, .nearbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--veil); color: var(--text); font: 600 14.5px var(--font-text); white-space: nowrap; position: relative; }
.nearbtn { height: 40px; border-radius: 999px; padding: 0 14px; font-size: 14px; }
@media (hover: hover) { .fbtn:hover, .nearbtn:hover { background: var(--veil-hover); border-color: var(--rule-strong); transform: translateY(-1px); } }
.fbtn[aria-expanded='true'], .nearbtn[aria-pressed='true'] { background: var(--accent-wash); border-color: var(--accent-edge); color: var(--hi); }
.fbadge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent-fill, var(--accent)); color: #fff; font: 700 12px var(--font-text); }
.fbadge[hidden] { display: none; }
.nearbtn:disabled { cursor: progress; opacity: .8; }
.nearbtn.is-busy .ic { animation: spin 1s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.tb2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px 10px; }
.tags { display: contents; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 99px; border: 1px solid var(--accent-edge); background: var(--accent-wash); color: var(--hi); font: 600 13px var(--font-text); }
[dir='rtl'] .tag { padding: 0 12px 0 6px; }
.tag-x { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 15px; line-height: 1; opacity: .75; transition: background-color .2s, opacity .2s; }
@media (hover: hover) { .tag:hover .tag-x { background: rgba(255,255,255,.18); opacity: 1; } }
.near-ring { fill: var(--accent); fill-opacity: .08; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 6; }
.me-wrap .me { display: block; width: 16px; height: 16px; border-radius: 50%; background: #3b82f6; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(59,130,246,.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 14px rgba(59,130,246,0); } 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); } }
.ml-dist { opacity: .85; font-weight: 600; }
.map-list a { transition: background-color .2s var(--ease), transform .2s var(--ease), outline-color .2s; }
.map-list a:active { transform: scale(.985); }
.map-list li[hidden] { display: none; }
/* The server renders every shop; explore.js then hides the ones outside the filter and the map view. Until that first pass the
   list stays invisible, so rows disappearing is not a layout shift (CLS was 0.23 on filtered map links). If the script never
   runs, the list shows after 3 s anyway. */
.js .map-list:not(.ml-ready) { visibility: hidden; animation: ml-reveal 0s 3s forwards; }
@keyframes ml-reveal { to { visibility: visible; } }

/* filter panel: a drawer over the list on desktop, a bottom sheet on phones */
.fpanel { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--page); animation: fin .25s var(--ease); }
.fpanel[hidden], .fscrim[hidden] { display: none; }
@keyframes fin { from { opacity: 0; translate: 0 10px; } }
.fhead { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.fhead h2 { font-size: 21px; margin-inline-end: auto; color: var(--hi); }
.fclear { background: none; border: 0; padding: 8px 10px; border-radius: 8px; color: var(--muted); font: 600 14px var(--font-text); }
@media (hover: hover) { .fclear:hover { color: var(--hi); background: var(--veil-hover); } }
.fx { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--veil); color: var(--text); }
@media (hover: hover) { .fx:hover { background: var(--veil-hover); } }
.fbody { flex: 1; overflow-y: auto; padding: 0 16px 8px; overscroll-behavior: contain; }
.fsec { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.fsec[hidden] { display: none; }
.fsec legend { padding: 0; margin-bottom: 6px; font: 700 12.5px var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.opts { display: grid; gap: 2px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; cursor: pointer; transition: background-color .2s var(--ease); user-select: none; }
.opt[hidden] { display: none; }
@media (hover: hover) { .opt:hover { background: var(--veil-hover); } }
.opt:active { background: var(--veil); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-box { position: relative; flex: none; width: 21px; height: 21px; border-radius: 6px; border: 1.5px solid var(--rule-strong); transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.opt-box::after { content: ''; position: absolute; inset: 3px 6px 5px 6px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; scale: 0; transition: scale .2s var(--ease); }
.opt input:checked + .opt-box { background: var(--accent-fill, var(--accent)); border-color: var(--accent); }
.opt input:checked + .opt-box::after { scale: 1; }
.opt:active .opt-box { transform: scale(.9); }
.opt input:focus-visible + .opt-box { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt input:disabled ~ * { opacity: .38; }
.opt input:disabled { cursor: not-allowed; }
.opt-name { font-size: 15.5px; }
.opt small { margin-inline-start: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.fsearch { width: 100%; height: 40px; margin-bottom: 6px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--veil); color: var(--text); transition: border-color .2s, box-shadow .25s var(--ease); }
.fsearch:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; border-radius: 12px; background: var(--veil); border: 1px solid var(--line); }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: grid; place-items: center; min-height: 40px; border-radius: 9px; font: 600 14px var(--font-text); color: var(--text-2); transition: background-color .2s var(--ease), color .2s, transform .15s var(--ease); }
@media (hover: hover) { .seg label:hover span { background: var(--veil-hover); } }
.seg label:active span { transform: scale(.95); }
.seg input:checked + span { background: var(--accent-fill, var(--accent)); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.fnote { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); }
.ffoot { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.fshow { width: 100%; height: 50px; border: 0; border-radius: 12px; background: var(--accent-fill, var(--accent)); color: #fff; font: 700 16px var(--font-head); }
.fscrim { position: fixed; inset: 0; z-index: 1900; background: rgba(0, 0, 0, .55); animation: fadein .25s; }
@keyframes fadein { from { opacity: 0; } }
.sheet-open { overflow: hidden; }
@media (max-width: 860px) {
  .fpanel { position: fixed; inset: auto 0 0 0; z-index: 2000; max-height: 82svh; border-radius: 20px 20px 0 0; border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -20px 50px rgba(0,0,0,.5); animation: sheet .3s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
  .fpanel::before { content: ''; align-self: center; width: 38px; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--rule-strong); }
  @keyframes sheet { from { translate: 0 100%; } }
  .fbtn-text { display: none; }
  .fbtn { width: 46px; padding: 0; }
  .fbadge { position: absolute; top: -6px; inset-inline-end: -6px; }
  .near-me { display: none; }
}

/* google rating */
.rate { display: inline-flex; align-items: baseline; gap: 4px; font-size: 13px; line-height: 1.2; }
.rate[hidden], .rate.is-loading[hidden] { display: none; } /* the loading shimmer below sets display too */
.rate b { color: var(--star); font-weight: 700; letter-spacing: .01em; }
.rate span { color: var(--muted); }
.rate i { font-style: normal; font-size: .85em; }
.ml-text .rate { margin: 2px 0 1px; }
.rate-lg { align-items: center; padding: 5px 12px; border-radius: 99px; background: var(--veil); border: 1px solid var(--line); font-size: 14.5px; }
.kicker .rate-lg { margin-inline-start: 4px; }
.mc-body .rate-lg { justify-self: start; margin-top: 2px; }

/* photo credit: a chip inside the picture, faint at rest, clear on hover / focus / tap */
.g-credit { position: absolute; inset-inline-start: 8px; bottom: 8px; z-index: 5; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 6px; background: rgba(10, 10, 12, .6); backdrop-filter: blur(6px); color: #fff; font: 500 10.5px/1.3 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: var(--credit-rest, .45); transition: opacity .25s var(--ease); }
.g-credit a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.card-vis:hover .g-credit, .g-frame:hover .g-credit, .mc-photo:hover .g-credit, .g-credit:hover, .g-credit:focus-within { opacity: 1; }
@media (hover: none) { .g-credit { opacity: .75; } }

.note-act { margin-top: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--accent-edge); background: var(--accent-wash); color: var(--hi); font: 600 13.5px var(--font-text); cursor: pointer; transition: transform .2s var(--ease), background-color .2s; }
.note-act:active { transform: scale(.97); }
@media (hover: hover) { .note-act:hover { background: var(--accent-fill, var(--accent)); } }

.seg-wrap { grid-template-columns: repeat(4, 1fr); }
.note-act { color: var(--hi); }

/* guide card: springs up after load, steps follow one by one */
.onb.is-in { animation: onb-in .7s cubic-bezier(.34, 1.45, .5, 1) both; transform-origin: bottom center; }
.onb.is-in li { animation: onb-step .5s cubic-bezier(.22, 1, .36, 1) both; }
.onb.is-in li:nth-child(1) { animation-delay: .35s; } .onb.is-in li:nth-child(2) { animation-delay: .47s; } .onb.is-in li:nth-child(3) { animation-delay: .59s; }
.onb.is-out { animation: onb-out .3s ease-in both; }
@keyframes onb-in { from { opacity: 0; transform: translateY(36px) scale(.94) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes onb-step { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes onb-out { to { opacity: 0; transform: translateY(24px) scale(.96); } }

/* home map teaser: frozen map with a compact action card */
.mapview { position: relative; height: clamp(240px, 32vw, 340px); margin: 64px var(--gutter) 0; max-width: var(--max); margin-inline: auto; border-radius: 10px; overflow: hidden; isolation: isolate; border: 1px solid var(--line, rgba(128,128,128,.3)); }
.mapview .mv-map { height: 100%; width: 100%; }
.mv-card { position: absolute; z-index: 500; inset-block-end: 16px; inset-inline-start: 16px; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; padding-inline: 18px 10px; border-radius: 12px; background: var(--page, #fff); color: var(--text, inherit); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.mv-count { margin: 0; font-weight: 700; }
.mv-go { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; text-decoration: none; font-weight: 800; }
.mv-go .arrow { width: 20px; height: 20px; }
.mv-go .arrow { transition: translate .25s var(--ease, ease); }
.mv-go:hover .arrow, .mv-go:focus-visible .arrow { translate: -3px 0; } /* nudges the way the arrow points: left in Hebrew */
html[dir='ltr'] .mv-go:hover .arrow, html[dir='ltr'] .mv-go:focus-visible .arrow { translate: 3px 0; }
@media (max-width: 860px) { .mapview { margin-inline: var(--gutter); } .mv-card { inset-inline: 12px; inset-block-end: 12px; justify-content: space-between; } }

/* add your business */
.submit-form { display: grid; gap: 20px; max-width: 640px; margin-top: 28px; font-size: 16px; line-height: 1.5; }
.fld { display: grid; gap: 6px; }
.fld label { font-weight: 700; }
.fld small { color: var(--muted); }
.fld input[type=text], .fld input[type=email], .fld textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line, rgba(128,128,128,.45)); border-radius: 8px; background: var(--paper, #fff); color: var(--ink-1, #1f2228); font: inherit; }
.fld textarea { resize: vertical; min-height: 110px; }
.fld input[type=file] { font: inherit; padding: 10px 0; }
.fld [aria-invalid='true'] { border-color: #c0392b; outline: 1px solid #c0392b; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { margin: 0; color: #c0392b; font-weight: 700; }
.submit-form .btn { justify-self: start; padding: 14px 26px; border: 0; cursor: pointer; font: 800 16px var(--font-text, inherit); }
.submit-form .btn:disabled { opacity: .6; cursor: progress; }
.submit-thanks { max-width: 640px; margin-top: 28px; padding: 28px; border-radius: 12px; border: 1px solid var(--line, rgba(128,128,128,.4)); }
.submit-thanks[hidden], .form-msg[hidden], .submit-form[hidden] { display: none; }

/* cities & areas atlas */
.atlas { max-width: var(--max); margin-inline: auto; padding: 28px var(--gutter) 60px; }
.atlas-head h1 { font-size: clamp(48px, 8vw, 110px); line-height: .98; margin: 0 0 14px; }
.atlas-head .lede { max-width: 56ch; margin: 0 0 24px; }
.atlas-search input { width: 100%; max-width: 640px; padding: 16px 18px; font: inherit; font-size: 18px; border: 1px solid var(--line, rgba(128,128,128,.45)); border-radius: 12px; background: var(--paper, #fff); color: var(--ink-1, #1f2228); }
.atlas-status { min-height: 1.5em; margin: 8px 0 0; opacity: .75; }
.atlas-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 34px; }
.atlas-jump a { padding: 8px 14px; border-radius: 99px; text-decoration: none; font-weight: 700; border: 1px solid var(--line, rgba(128,128,128,.4)); }
.atlas-jump a:hover { background: var(--accent-fill, var(--accent)); color: var(--on, #fff); border-color: var(--accent); }
.atlas-grid { display: grid; gap: 22px; }
.atlas-city { scroll-margin-top: 90px; padding: 24px; border-radius: 14px; border: 1px solid var(--line, rgba(128,128,128,.35)); background: color-mix(in srgb, var(--paper, #fff) 70%, transparent); margin-bottom: 0; }
.atlas-city[hidden], .atlas-city li[hidden] { display: none; }
.atlas-city > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 14px; }
.atlas-city h2 { margin: 0; font-size: clamp(28px, 3.6vw, 44px); }
.atlas-city h2 a { text-decoration: none; }
.atlas-n { opacity: .7; font-weight: 600; }
.atlas-hoods { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; }
.atlas-hoods a { display: inline-flex; gap: 8px; align-items: center; padding: 7px 13px; border-radius: 99px; text-decoration: none; font-weight: 700; background: var(--veil, rgba(128,128,128,.14)); }
.atlas-hoods a:hover { background: var(--accent-fill, var(--accent)); color: var(--on, #fff); }
.atlas-hoods small { opacity: .7; }
.atlas-shops { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; }
.atlas-shops a { display: grid; gap: 1px; padding: 9px 4px; text-decoration: none; }
.atlas-shops a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.atlas-shops small { opacity: .7; font-size: 13.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* scroll reveal (assets/reveal.js): text rises, images come in from the left */
/* The transition lives on .rv-in only: entering the hidden state is instant, only the entrance animates. With the
   transition on .rv itself, text that had already painted (reveal.js arriving after the first render, e.g. after the
   browser comes back from the background) faded OUT and then in again: the "jumps twice" on iPhone. */
.rv, .rv-m { opacity: 0; }
.rv { transform: translateY(16px); }
.rv-m { transform: translateX(-64px); }
.rv-s { opacity: 0; transform: translateY(26px); }
.rv.rv-in, .rv-m.rv-in, .rv-s.rv-in { opacity: 1; transform: none; }
.rv.rv-in, .rv-m.rv-in { transition: opacity .75s ease, transform .85s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0ms); }
.rv-s.rv-in { transition: opacity 1s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0ms); }
/* forms fade only, so a field never moves while someone taps it */
.rv-f { opacity: 0; }
.rv-f.rv-in { opacity: 1; transition: opacity .6s ease; transition-delay: var(--d, 0ms); }

/* add your business */
.submit-form { display: grid; gap: 20px; max-width: 640px; margin-top: 28px; font-size: 16px; line-height: 1.5; }
.fld { display: grid; gap: 6px; }
.fld label { font-weight: 700; }
.fld small { color: var(--muted); }
.fld input[type=text], .fld input[type=email], .fld textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line, rgba(128,128,128,.45)); border-radius: 8px; background: var(--paper, #fff); color: var(--ink-1, #1f2228); font: inherit; }
.fld textarea { resize: vertical; min-height: 110px; }
.fld input[type=file] { font: inherit; padding: 10px 0; }
.fld [aria-invalid='true'] { border-color: #c0392b; outline: 1px solid #c0392b; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { margin: 0; color: #c0392b; font-weight: 700; }
.submit-form .btn { justify-self: start; padding: 14px 26px; border: 0; cursor: pointer; font: 800 16px var(--font-text, inherit); }
.submit-form .btn:disabled { opacity: .6; cursor: progress; }
.submit-thanks { max-width: 640px; margin-top: 28px; padding: 28px; border-radius: 12px; border: 1px solid var(--line, rgba(128,128,128,.4)); }
.submit-thanks[hidden], .form-msg[hidden], .submit-form[hidden] { display: none; }

/* cities & areas atlas */
.atlas { max-width: var(--max); margin-inline: auto; padding: 28px var(--gutter) 60px; }
.atlas-head h1 { font-size: clamp(48px, 8vw, 110px); line-height: .98; margin: 0 0 14px; }
.atlas-head .lede { max-width: 56ch; margin: 0 0 24px; }
.atlas-search input { width: 100%; max-width: 640px; padding: 16px 18px; font: inherit; font-size: 18px; border: 1px solid var(--line, rgba(128,128,128,.45)); border-radius: 12px; background: var(--paper, #fff); color: var(--ink-1, #1f2228); }
.atlas-status { min-height: 1.5em; margin: 8px 0 0; opacity: .75; }
.atlas-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 34px; }
.atlas-jump a { padding: 8px 14px; border-radius: 99px; text-decoration: none; font-weight: 700; border: 1px solid var(--line, rgba(128,128,128,.4)); }
.atlas-jump a:hover { background: var(--accent-fill, var(--accent)); color: var(--on, #fff); border-color: var(--accent); }
.atlas-grid { display: grid; gap: 22px; }
.atlas-city { scroll-margin-top: 90px; padding: 24px; border-radius: 14px; border: 1px solid var(--line, rgba(128,128,128,.35)); background: color-mix(in srgb, var(--paper, #fff) 70%, transparent); margin-bottom: 0; }
.atlas-city[hidden], .atlas-city li[hidden] { display: none; }
.atlas-city > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 14px; }
.atlas-city h2 { margin: 0; font-size: clamp(28px, 3.6vw, 44px); }
.atlas-city h2 a { text-decoration: none; }
.atlas-n { opacity: .7; font-weight: 600; }
.atlas-hoods { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; }
.atlas-hoods a { display: inline-flex; gap: 8px; align-items: center; padding: 7px 13px; border-radius: 99px; text-decoration: none; font-weight: 700; background: var(--veil, rgba(128,128,128,.14)); }
.atlas-hoods a:hover { background: var(--accent-fill, var(--accent)); color: var(--on, #fff); }
.atlas-hoods small { opacity: .7; }
.atlas-shops { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; }
.atlas-shops a { display: grid; gap: 1px; padding: 9px 4px; text-decoration: none; }
.atlas-shops a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.atlas-shops small { opacity: .7; font-size: 13.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* text reveal (assets/reveal.js adds .rv-on only when it can run) */
.rv-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .14em; margin-block: -.14em; }
.rv-i { display: inline-block; will-change: transform; }
.rv-on .rv-head .rv-i { transform: translateY(112%) rotate(2deg); transform-origin: 0 100%; transition: transform 1.05s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 55ms); }
.rv-on .rv-head.rv-in .rv-i { transform: none; }
.rv-on .rv-body { opacity: 0; transform: translateY(16px); filter: blur(4px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1), filter .9s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0ms); }
.rv-on .rv-body.rv-in { opacity: 1; transform: none; filter: none; }

/* add your business: form + live preview */
.submit { max-width: var(--max); margin-inline: auto; padding: 28px var(--gutter) 70px; }
.submit-head h1 { font-size: clamp(44px, 7vw, 96px); line-height: 1; margin: 0 0 14px; }
.submit-head .lede { max-width: 60ch; margin: 0 0 30px; }
.submit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.submit-grid[hidden] { display: none; }
.submit-grid .submit-form { max-width: none; margin-top: 0; }
.fld .lbl { font-weight: 700; }
.cnt { text-align: end; color: var(--muted); } .cnt.low { color: #c0392b; opacity: 1; }
.drop { display: grid; gap: 4px; place-items: center; text-align: center; padding: 26px 16px; border: 2px dashed var(--line, rgba(128,128,128,.5)); border-radius: 12px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:hover, .drop.over, .drop:focus-within { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.drop.has { border-style: solid; }
.drop-t { font-weight: 700; }
.pv { position: sticky; top: 84px; }
.pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pv-tabs { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--veil, rgba(128,128,128,.16)); }
.pv-tabs button { border: 0; background: none; color: inherit; font: 700 14px var(--font-text, inherit); padding: 7px 14px; border-radius: 99px; cursor: pointer; transition: background-color .25s, color .25s; }
.pv-tabs button[aria-selected='true'] { background: var(--accent-fill, var(--accent)); color: var(--on, #fff); }
.pv-stage { padding: 22px; border-radius: 16px; background: var(--back, rgba(128,128,128,.12)); min-height: 420px; display: grid; place-items: center; }
.pv-card, .pv-page { width: 100%; display: flex; justify-content: center; animation: pv-in .5s cubic-bezier(.16, 1, .3, 1) both; }
.pv-card .card, .pv-page .card { width: min(100%, 300px); }
.pv-page .card-xl { width: min(100%, 360px); }
.pv-back { display: grid; gap: 10px; padding: 4px 14px 16px; border-top: 1px dashed var(--paper-rule); }
.pv-sec { display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.pv-sec b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.pv-stamp .card-name[data-out].is-ph, .pv-stamp .card-why.is-ph { opacity: .45; }
.pv-stage[data-view='card'] .pv-page, .pv-stage[data-view='page'] .pv-card { display: none; }
@keyframes pv-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.pv-photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--accent-fill, var(--accent)); color: var(--on, #fff); overflow: hidden; }
.pv-photo.wide { aspect-ratio: 16 / 9; }
.pv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: pv-in .4s both; }
.pv-glyph { font: 800 84px/1 var(--font-head, inherit); font-style: normal; opacity: .9; }
.pv-badge { position: absolute; top: 10px; inset-inline-start: 10px; font: 700 11px var(--font-text, inherit); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: rgba(10,10,12,.62); color: #fff; }
.pv-body, .pv-in { display: grid; gap: 6px; padding: 14px 16px 18px; }
.pv-name { font: 700 21px/1.15 var(--font-head, inherit); }
.pv-why, .pv-in p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.pv-in h3 { margin: 0; font: 800 28px/1.1 var(--font-head, inherit); }
.pv-in h4 { margin: 12px 0 4px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.pv-lead { font-size: 16px !important; }
.is-ph { opacity: .4; }
[data-sec].is-empty { display: none; }
.pv-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.pv-tags li { padding: 4px 10px; border-radius: 99px; font-size: 13.5px; font-weight: 700; background: color-mix(in srgb, var(--accent) 16%, transparent); animation: pv-in .3s both; }
.pv-note { margin: 12px 4px 0; font-size: 13.5px; opacity: .7; }
@media (max-width: 900px) { .submit-grid { grid-template-columns: 1fr; } .pv { position: static; } .pv-stage { min-height: 0; padding: 14px; } }
.pv-sec.is-empty, .pv-back:not(:has(.pv-sec:not(.is-empty))) { display: none; }

/* Google rating placeholder: holds the line's space and shimmers until the rating arrives, so the list never reflows */
.rate.is-loading { display: block; width: 104px; height: 16px; border-radius: 99px; margin: 2px 0 1px; padding: 0; border: 0; background: linear-gradient(100deg, color-mix(in srgb, currentColor 9%, transparent) 30%, color-mix(in srgb, currentColor 20%, transparent) 50%, color-mix(in srgb, currentColor 9%, transparent) 70%) 200% 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.rate.rate-lg.is-loading { width: 120px; height: 31px; }
.rate.is-in { animation: fadein .35s ease both; }
@media (prefers-reduced-motion: reduce) { .rate.is-loading { animation: none; } }

/* store page: Google slots keep their space and shimmer until the answer arrives */
.skel-box { display: block; aspect-ratio: 1; background: linear-gradient(100deg, color-mix(in srgb, currentColor 8%, transparent) 30%, color-mix(in srgb, currentColor 18%, transparent) 50%, color-mix(in srgb, currentColor 8%, transparent) 70%) 200% 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel-lines { display: grid; gap: 6px; }
.skel-lines i { display: block; height: 14px; width: 80%; border-radius: 99px; background: linear-gradient(100deg, color-mix(in srgb, currentColor 8%, transparent) 30%, color-mix(in srgb, currentColor 18%, transparent) 50%, color-mix(in srgb, currentColor 8%, transparent) 70%) 200% 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.rate[href], a.rate { text-decoration: none; color: inherit; cursor: pointer; }
.rate[href]:hover b, .rate[data-href]:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rate[data-href] { cursor: pointer; }
a.rate:not([href]) { cursor: default; }
.profile-map { position: relative; }
.mini-map-hit { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 10px; z-index: 5; text-decoration: none; }
.mini-map-hit span { padding: 6px 12px; border-radius: 99px; font: 700 13px var(--font-text, inherit); background: var(--page); color: var(--text); box-shadow: 0 4px 14px var(--shadow, rgba(0,0,0,.25)); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.mini-map-hit:hover span, .mini-map-hit:focus-visible span { opacity: 1; transform: none; }
@media (hover: none) { .mini-map-hit span { opacity: .95; transform: none; } }
@media (prefers-reduced-motion: reduce) { .skel-box, .skel-lines i { animation: none; } }

/* map card: bigger, with the text fading out to say there is more on the shop's page */
.map-card { width: min(400px, calc(100% - 36px)); cursor: pointer; }
.mc-vis { height: 230px; }
.mc-body { padding: 12px 18px 16px; gap: 6px; }
.mc-body h2 { font-size: 24px; line-height: 1.15; }
.mc-body p { font-size: 15px; line-height: 1.5; }
.mc-text { position: relative; max-height: 9.2em; overflow: hidden; display: grid; gap: 6px; }
.mc-text.is-cut { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.mc-open { margin-top: 2px; display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px; border-radius: 99px; background: var(--accent-fill, var(--accent)); color: var(--on, #fff); text-decoration: none; }
.mc-open span { transition: transform .2s; }
.map-card:hover .mc-open span { transform: translateX(3px); }
[dir='rtl'] .map-card:hover .mc-open span { transform: translateX(-3px); }
.mc-close { position: absolute; z-index: 5; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; font: 400 20px/1 var(--font-text, inherit); cursor: pointer; background: rgba(10,10,12,.55); color: #fff; }
.mc-close:hover { background: rgba(10,10,12,.8); }
.map-card.is-online .mc-vis { height: 110px; }
@media (max-width: 860px) {
  .map-card, [dir='rtl'] .map-card { position: fixed; z-index: 1400; inset: auto 10px 10px 10px; width: auto; max-width: none; display: grid; grid-template-columns: 116px 1fr; max-height: 46vh; }
  .map-card[hidden], [dir='rtl'] .map-card[hidden] { display: none; }
  .mc-vis, .map-card.is-online .mc-vis { height: auto; min-height: 150px; }
  .mc-glyph { font-size: 44px; }
  .mc-soon { display: none; }
  .mc-body { padding: 10px 14px 12px; min-width: 0; }
  .mc-body h2 { font-size: 19px; padding-inline-end: 26px; }
  .mc-body p { font-size: 14px; }
  .mc-text { max-height: 4.6em; }
}
/* desktop: the whole card scales with the viewport (em units off one font-size; 1em = 16px at ~1450x840) */
@media (min-width: 861px) {
  .map-card { font-size: clamp(11px, min(1.1vw, 1.9vh), 18px); width: 25em; max-width: calc(100% - 36px); }
  .mc-vis { height: 14.4em; }
  .map-card.is-online .mc-vis { height: 6.9em; }
  .mc-glyph { font-size: 4em; }
  .mc-soon { font-size: .78em; }
  .mc-body { padding: .75em 1.125em 1em; gap: .375em; }
  .mc-body h2 { font-size: 1.5em; }
  .mc-body p { font-size: .94em; }
  .mc-how { font-size: .82em !important; }
  .mc-text { gap: .375em; max-height: 8.5em; }
  .mc-open { padding: .6em 1em; gap: .5em; }
  .mc-body .rate-lg { font-size: .9em; }
  .mc-close { width: 1.5em; height: 1.5em; font-size: 1.25em; top: .5em; inset-inline-end: .5em; }
}

/* hidden from the very first paint (inline script in <head>); reveal.js lifts it once the entrance state is set, so a slow parse never shows the page, hides it, and shows it again */
html.rv-pre main, html.rv-pre footer { visibility: hidden; }

/* confirmation: replaces the heading and form, one column, with somewhere to go next */
.submit-head[hidden] { display: none; }
.submit-thanks { max-width: none; margin-top: 0; border: 0; border-radius: 0; padding: 8px 0 24px; animation: pv-in .6s cubic-bezier(.16, 1, .3, 1) both; outline: none; }
.submit-thanks:focus, .submit-thanks:focus-visible { outline: none; }
.submit-thanks h2 { font-size: clamp(44px, 7vw, 96px); line-height: 1; margin: 0 0 14px; }
.submit-thanks .lede { max-width: 56ch; margin: 0 0 26px; }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 44px; }
.thanks-more { margin: 0 0 18px; font-size: 20px; }
.thanks-cards { margin-top: 0; }
@media (max-width: 760px) { .thanks-cards .card:nth-child(n+3) { display: none; } }

/* send button sits under the form, at its inline end: physical left in Hebrew (RTL), right in English */
.submit-form .form-send { justify-self: end; }

/* gallery mode */
.g-frame { border: 0; cursor: zoom-in; font: inherit; width: 100%; }
.card-vis.can-zoom { cursor: zoom-in; }
.lb-open-btn { position: absolute; z-index: 4; bottom: 10px; inset-inline-start: 10px; padding: 7px 13px; border: 0; border-radius: 99px; font: 700 13px var(--font-text, inherit); cursor: pointer; background: rgba(10,10,12,.7); color: #fff; backdrop-filter: blur(6px); }
.lb-open-btn:hover { background: rgba(10,10,12,.9); }
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: rgba(8,8,10,.94); animation: fadein .25s ease both; touch-action: pan-y; }
.lb-fig { margin: 0; display: grid; gap: 10px; justify-items: center; max-width: 100vw; }
.lb-fig img { max-width: min(94vw, 1600px); max-height: 82vh; object-fit: contain; opacity: 0; transform: scale(.985); transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1); border-radius: 4px; }
.lb-fig img.is-in { opacity: 1; transform: none; }
.lb-cap { font-size: 13px; color: rgba(255,255,255,.8); }
.lb-cap a, .lb-cap .g-credit { color: inherit; position: static; background: none; opacity: 1; padding: 0; }
.lb-count { position: absolute; bottom: 14px; inset-inline: 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.6); pointer-events: none; }
.lb-btn { position: absolute; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; font: 400 30px/1 var(--font-text, inherit); cursor: pointer; background: rgba(255,255,255,.12); color: #fff; transition: background-color .2s; }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255,255,255,.26); }
.lb-btn[hidden] { display: none; }
.lb-x { top: 14px; inset-inline-end: 14px; font-size: 28px; }
.lb-prev { inset-inline-start: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { inset-inline-end: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) { .lb-prev, .lb-next { top: auto; bottom: 22px; transform: none; width: 44px; height: 44px; } .lb-fig img { max-height: 74vh; } }
@media (prefers-reduced-motion: reduce) { .lb, .lb-fig img { animation: none; transition: none; } }

/* field-level form errors (linked to inputs with aria-describedby) */
.fld .fld-err { opacity: 1; color: #b3261e; font-weight: 700; font-size: 14px; }
.fld .fld-err[hidden] { display: none; }
.fld [aria-invalid='true'] { border-color: #b3261e; }

/* store page: map is a full-width section after the story; sources sit in the side column and open as a floating panel */
.profile-body { align-items: start; }
.profile-body .read { max-width: 78ch; }
.profile-side { position: relative; min-width: 0; }
/* sources: an always-open card of structured entries (kind, headline, publisher and date) */
.profile-side .sources { margin-top: 0; padding: 4px 18px 6px; background: var(--back, var(--page)); color: var(--ink, var(--text)); border-radius: 8px; box-shadow: 0 0 0 1px var(--paper-rule, var(--line)); }
.profile-side .sources > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 12px; font: 800 17px var(--font-head, inherit); color: var(--ink, var(--text)); cursor: pointer; }
.profile-side .sources > summary::before { order: 3; margin-inline-start: auto; }
.profile-side .sources > summary > span { order: 1; }
.profile-side .sources > summary .src-n { order: 2; min-width: 24px; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink, #222) 10%, transparent); font: 700 13px var(--font-text, inherit); text-align: center; }
.src-list { list-style: none; margin: 0; padding: 0; }
.src-list li { border-top: 1px dashed var(--paper-rule, var(--line)); }
.src-list a { display: grid; gap: 3px; padding: 12px 0; text-decoration: none; color: inherit; }
.src-kind { font: 800 11px/1 var(--font-text, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, var(--muted)); }
.src-title { font: 600 15px/1.35 var(--font-text, inherit); color: var(--ink-1, var(--ink, var(--text))); text-wrap: pretty; }
.src-meta { font-size: 13px; color: var(--ink-3, var(--muted)); }
.src-meta i { font-style: normal; margin-inline-start: 6px; opacity: .6; transition: transform .2s, opacity .2s; display: inline-block; }
.src-list a:hover .src-title, .src-list a:focus-visible .src-title { text-decoration: underline; text-underline-offset: 3px; }
.src-list a:hover .src-meta i { opacity: 1; transform: translate(2px, -2px); }
html[dir='rtl'] .src-meta i { transform: scaleX(-1); } html[dir='rtl'] .src-list a:hover .src-meta i { transform: scaleX(-1) translate(2px, -2px); }
.place-map { margin: 48px 0 0; }
.place-map h2 { margin: 0 0 6px; }
.pm-addr { margin: 0 0 16px; color: var(--muted); }
.pm-frame { display: block; width: 100%; height: clamp(340px, 52vh, 520px); border: 0; border-radius: 8px; background: var(--veil, rgba(128,128,128,.12)); box-shadow: 0 0 0 1px var(--line); }
.pm-leaflet { position: relative; }
.pm-leaflet .mini-map { height: clamp(340px, 52vh, 520px); margin: 0; border-radius: 8px; }
.pm-open { position: absolute; z-index: 5; inset-block-end: 16px; inset-inline-start: 16px; box-shadow: 0 6px 18px var(--shadow, rgba(0,0,0,.25)); }

/* a source named in the text links to it (new tab) */
.src-link { color: inherit; text-decoration: underline; text-decoration-color: var(--accent, currentColor); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.src-link:hover, .src-link:focus-visible { background: var(--accent-wash, transparent); }

/* sources: plain card, always shown; the column disappears when a shop has none */
.profile-side .sources > .src-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 14px 0 12px; font: 800 17px var(--font-head, inherit); color: var(--ink, var(--text)); }
.profile-body.no-side { grid-template-columns: 1fr; }

/* home-page map: tall enough for the storefront card; the card sits on the inline-end side, the count and button on the start side */
.mapview { height: clamp(420px, 44vw, 560px); }
.mapview .map-card, [dir='rtl'] .mapview .map-card { right: auto; left: auto; inset-inline-end: 16px; inset-block-start: 16px; }
.mapview .leaflet-container { cursor: grab; }

/* gesture hint over the home map ("hold Ctrl and scroll to zoom") */
.map-hint { position: absolute; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; text-align: center; background: rgba(20, 18, 14, .55); color: #fff; font: 700 18px/1.4 var(--font-text, inherit); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.map-hint.on { opacity: 1; }
.mapview .leaflet-container { touch-action: pan-y pinch-zoom; }

/* source count: a light, quiet pill next to the heading */
.profile-side .sources .src-n { order: 2; margin-inline-start: 8px; min-width: 22px; padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink, #222) 8%, transparent); color: var(--ink-3, var(--muted)); font: 500 13px/1.5 var(--font-text, inherit); text-align: center; font-variant-numeric: tabular-nums; }
.profile-side .sources > .src-h { justify-content: flex-start; }

.profile-body.no-main { grid-template-columns: minmax(0, 420px); justify-content: start; margin-top: 24px; }

/* FAQ page: one <details> per question, same +/− marker as the sources list */
.faq { margin-top: var(--s-32, 32px); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.faq-item { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 700; font-size: 1.08em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 4px; line-height: 1; }
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.faq-item p { margin: 0 0 20px; max-width: 65ch; }

/* Fix-or-remove form (/report/): request-type cards, inline radios, opening-hours table */
.report-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.report-form legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.rp-types { display: grid; gap: 10px; }
.rp-opt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.rp-types .rp-opt { border: 1px solid var(--line, rgba(128,128,128,.45)); border-radius: 10px; padding: 14px 16px; }
.rp-types .rp-opt:has(input:checked) { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.rp-opt input { margin-top: 5px; accent-color: currentColor; flex: none; }
.rp-opt span { display: grid; gap: 2px; }
.rp-opt b { font-weight: 700; }
.rp-opt small { color: var(--muted); }
.rp-inline { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rp-inline .rp-opt b { font-weight: 500; }
.rp-check { display: flex; gap: 10px; align-items: center; margin: 10px 0; font-weight: 500; cursor: pointer; }
.rp-hours { border-collapse: collapse; width: 100%; max-width: 460px; margin-top: 6px; }
.rp-hours th, .rp-hours td { padding: 6px 8px 6px 0; text-align: start; font-size: 15px; }
.rp-hours thead th { font-size: 13px; font-weight: 700; opacity: .7; }
.rp-hours tbody th { font-weight: 500; white-space: nowrap; }
.rp-hours input[type=time] { width: 100%; min-width: 92px; padding: 8px; border: 1px solid var(--line, rgba(128,128,128,.45)); border-radius: 8px; background: var(--paper, #fff); color: var(--ink-1, #1f2228); font: inherit; }
.rp-hours input:disabled { opacity: .35; }
.rp-hours.is-off { opacity: .4; }
.report-form [aria-invalid='true'].rp-types, .report-form fieldset[aria-invalid='true'] { outline: 1px solid #c0392b; outline-offset: 6px; border-radius: 10px; }
.fld-err { color: #c0392b; font-weight: 700; opacity: 1 !important; }
.rp-sec[hidden], .rp-only[hidden], .rp-photo-note[hidden], .report-form[hidden] { display: none; }
.facts-report { margin: 12px 0 0; font-size: 14px; }
.facts-report a { opacity: .75; }
.facts-report a:hover { opacity: 1; }

/* Rotating placeholder (src/assets/hint.js): prefix stays, the example word swaps letter by letter */
input.has-rot::placeholder { color: transparent; }
.ph-rot { position: absolute; z-index: 1; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s ease; }
.ph-rot.is-off { opacity: 0; }
.ph-pre { }
.ph-word { display: inline-block; color: var(--ink, currentColor); font-weight: 500; }
.ph-ch { display: inline-block; white-space: pre; will-change: transform, opacity, filter; transition: transform .38s cubic-bezier(.22,.8,.24,1) var(--d), opacity .38s ease var(--d), filter .38s ease var(--d); }
.ph-word.is-out .ph-ch { transform: translateY(-.45em); opacity: 0; filter: blur(3px); transition-duration: .26s; transition-timing-function: cubic-bezier(.5,0,.75,0); }
.ph-word.is-in .ph-ch { transform: translateY(.5em); opacity: 0; filter: blur(3px); transition: none; }
.ph-word.is-in.is-go .ph-ch { transform: none; opacity: 1; filter: none; transition: transform .42s cubic-bezier(.22,.8,.24,1) var(--d), opacity .42s ease var(--d), filter .42s ease var(--d); }
.ph-word.is-fade { opacity: 0; transition: opacity .2s ease; }
.ph-word.is-fadein { animation: ph-fade .35s ease both; }
@keyframes ph-fade { from { opacity: 0; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .ph-ch { transition: none !important; } }

/* Filters as a modal on desktop too: a centred dialog over a dimmed, lightly blurred page. Head and footer stay put, the
   body scrolls; categories and places sit in two columns so the dialog stays short. Phones keep the bottom sheet above. */
.fscrim { background: rgba(14, 16, 22, .48); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fadein .22s ease; }
@media (min-width: 861px) {
  .fpanel { position: fixed; inset: 0; margin: auto; z-index: 2000; width: min(620px, calc(100vw - 48px)); height: fit-content; max-height: min(82vh, 780px);
    border-radius: 18px; border: 1px solid var(--line); background: var(--page); box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .12);
    overflow: clip; animation: fdialog .26s cubic-bezier(.22, .8, .24, 1); }
  @keyframes fdialog { from { opacity: 0; transform: translateY(10px) scale(.97); } }
  .fhead { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
  .fbody { padding: 16px 20px 8px; min-height: 0; } /* min-height 0: without it the flex child never shrinks, the dialog overflows and focus() scrolls the whole dialog */
  .fhead, .ffoot { flex: none; }
  .fsec { margin-bottom: 22px; }
  .fsec .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  .fsearch { margin-bottom: 10px; }
  .ffoot { padding: 14px 20px 18px; background: var(--page); }
}
@media (prefers-reduced-motion: reduce) { .fpanel, .fscrim { animation: none; } }
.ph-host { display: block; position: relative; }

/* ---------- fairs and markets (/fairs/, home strip, shop-page row; src/assets/fairs.js) ----------
   A tear-off calendar leaf for dated fairs, an admission ticket per fair: stub (leaf or week strip), perforation, body. */
.fairs { max-width: var(--max); margin-inline: auto; padding: 28px var(--gutter) 64px; }
.fairs-head h1 { font-size: clamp(40px, 6vw, 72px); margin: 0 0 14px; }
.fairs-head .lede { max-width: 58ch; margin: 0 0 22px; }
.fairs-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.fairs-kinds button { font: 600 15px/1 var(--font-text); color: var(--text-2, var(--text)); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.fairs-kinds button:hover { border-color: var(--accent); color: var(--hi); }
.fairs-kinds button[aria-pressed="true"] { background: var(--accent-fill, var(--accent)); border-color: var(--accent); color: var(--on); }
.fairs-sec { margin-top: 44px; }
.fairs-sec > h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 18px; }
.fairs-none { color: var(--muted); }

.cal-leaf { flex: none; display: inline-grid; justify-items: center; align-content: center; width: 68px; min-height: 78px; padding: 12px 4px 8px; border-radius: 6px; background: var(--paper); color: var(--ink-1); position: relative;
  box-shadow: 0 1px 0 var(--paper-rule), 0 6px 14px -8px var(--shadow);
  /* binding holes along the top edge */
  -webkit-mask: radial-gradient(circle 3px at 22% 6px, #0000 98%, #000) , radial-gradient(circle 3px at 78% 6px, #0000 98%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle 3px at 22% 6px, #0000 98%, #000), radial-gradient(circle 3px at 78% 6px, #0000 98%, #000); mask-composite: intersect; }
.cal-wd { font: 700 12px/1 var(--font-text); color: var(--accent-on-paper, var(--accent)); }
.cal-dn { font: 800 32px/1 var(--font-head); margin: 4px 0 3px; font-variant-numeric: tabular-nums; }
.cal-mo { font: 600 12px/1 var(--font-text); color: var(--ink-2); }
.cal-leaf.is-blank .cal-dn { color: var(--ink-3); }

.cal { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cal-day { display: flex; gap: 18px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.cal-day:first-child { border-top: 0; }
.cal-list { flex: 1; min-width: 0; }
.cal-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 700 18px/1.3 var(--font-head); margin: 4px 0 8px; }
.cal-list .cal-rel { font: 700 12px/1 var(--font-text); color: #fff; background: var(--accent-fill, var(--accent)); border-radius: 999px; padding: 4px 9px; }
.cal-day.is-tomorrow .cal-list .cal-rel { background: none; color: var(--hi); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-day.is-today .cal-leaf { box-shadow: 0 0 0 2px var(--accent), 0 6px 14px -8px var(--shadow); }
.cal-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cal-list a { display: grid; gap: 2px; padding: 6px 10px; margin-inline: -10px; border-radius: 6px; text-decoration: none; color: inherit; }
.cal-list a:hover { background: var(--veil-hover, rgba(255, 240, 215, .06)); }
.cal-list b { font-weight: 700; color: var(--hi); }
.cal-list span { color: var(--muted); font-size: 15px; }

.tix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.tix { display: grid; grid-template-columns: 96px 1fr; background: var(--paper); color: var(--ink-1); border-radius: 8px; box-shadow: 0 10px 24px -16px var(--shadow); scroll-margin-top: 90px;
  /* notches where the stub tears off */
  --notch: radial-gradient(circle 9px at 96px 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 96px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  -webkit-mask: var(--notch); mask: var(--notch); }
[dir="rtl"] .tix { --notch: radial-gradient(circle 9px at calc(100% - 96px) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 96px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.tix:target { outline: 3px solid var(--focus); outline-offset: 3px; }
.tix-stub { display: grid; place-items: start center; padding: 20px 0; border-inline-end: 2px dashed var(--paper-rule); }
.tix-stub .cal-leaf { box-shadow: none; background: none; -webkit-mask: none; mask: none; padding-top: 0; }
.tix-week { display: grid; gap: 4px; }
.tix-week i { font: 500 12px/22px var(--font-text); font-style: normal; width: 26px; height: 22px; text-align: center; border-radius: 4px; color: var(--ink-3); }
.tix-week i.on { background: var(--ink-1); color: var(--paper); font-weight: 700; }
.tix-week i.today { box-shadow: 0 0 0 2px var(--accent); }
.tix-body { padding: 18px 20px 16px; min-width: 0; }
.tix-kind { margin: 0 0 4px; font: 800 12px/1.3 var(--font-text); letter-spacing: .03em; color: var(--accent-on-paper, var(--accent)); }
.tix h3 { margin: 0 0 8px; font: 700 22px/1.2 var(--font-head); color: var(--ink-1); }
.tix-what { margin: 0 0 12px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.tix-facts { display: grid; gap: 6px; margin: 0 0 12px; font-size: 15px; }
.tix-facts div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.tix-facts dt { color: var(--ink-3); font-weight: 600; }
.tix-facts dd { margin: 0; color: var(--ink-1); }
.tix-dates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tix-dates time { font-size: 13px; font-weight: 700; border: 1px solid var(--paper-rule); border-radius: 999px; padding: 2px 9px; }
.tix-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-weight: 700; font-size: 15px; }
.tix-links a { color: var(--ink-1); text-decoration-color: var(--accent); text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 28px; } /* tap target: WCAG 2.2 AA asks 24px */
.tix-src { margin: 0; padding-top: 10px; border-top: 1px solid var(--paper-rule); font-size: 13px; color: var(--ink-3); }
.tix-src a { color: inherit; }
.fairs-note { margin-top: 48px; max-width: 70ch; color: var(--muted); font-size: 16px; }
.fairs-note a { color: var(--hi); text-decoration-color: var(--accent); }
.facts .tix-dates time { border-color: var(--line); }

/* home: the next fairs */
.fair-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.fair-chips .cal-day { padding: 0; border: 0; display: block; }
.fair-chips a { display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; padding: 10px; margin: -10px; border-radius: 10px; transition: background .15s; }
.fair-chips a:hover { background: var(--veil-hover, rgba(255, 240, 215, .06)); }
.fc-body { display: grid; gap: 3px; min-width: 0; }
.fc-body b { font: 700 18px/1.25 var(--font-head); color: var(--hi); }
.fc-body span { color: var(--muted); font-size: 15px; }
.fair-chips .cal-day:nth-child(n+5) { display: none; } /* fairs.js removes passed dates; show the next four */

@media (max-width: 560px) {
  .tix { grid-template-columns: 74px 1fr; --notch: radial-gradient(circle 8px at 74px 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 74px 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
  [dir="rtl"] .tix { --notch: radial-gradient(circle 8px at calc(100% - 74px) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at calc(100% - 74px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
  .tix-body { padding: 16px 14px 14px; }
  .tix-facts div { grid-template-columns: 62px 1fr; }
  .cal-day { gap: 12px; }
  .cal-leaf { width: 58px; min-height: 70px; }
  .cal-dn { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .fairs-kinds button, .fair-chips a { transition: none; } }

/* fair tickets: venue photos from Google across the top (places.js); first photo large, up to two beside it */
.tix-photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 172px; margin: -6px -8px 14px; border-radius: 6px; overflow: hidden; }
.tix-photos > * { min-height: 0; border-radius: 0; aspect-ratio: auto; }
.tix-photos > :first-child { grid-row: 1 / -1; }
.tix-photos[data-n="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.tix-photos[data-n="2"] { grid-template-rows: 1fr; grid-template-columns: 1.4fr 1fr; }
.tix-ph { position: relative; margin: 0; background: var(--back); overflow: hidden; }
.tix-ph img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .35s ease; }
.tix-ph.is-in img { opacity: 1; }
.tix-ph .g-credit { position: absolute; inset-inline-start: 6px; bottom: 6px; max-width: calc(100% - 12px); }
@media (max-width: 560px) { .tix-photos { height: 140px; margin: -4px -4px 12px; } }
@media (prefers-reduced-motion: reduce) { .tix-ph img { transition: none; } }
.tix-ph:not(:first-child) .g-credit { font-size: 9.5px; padding: 2px 6px; inset-inline-start: 4px; bottom: 4px; max-width: calc(100% - 8px); }
/* the fairs filter sets [hidden]; the display rules above (flex/grid) would otherwise keep those rows and cards visible */
.cal-day[hidden], .tix[hidden], .fairs-sec[hidden], .cal-list li[hidden] { display: none; }

/* placeholders: readable (4.5:1). The home search plate is paper in both themes, so it gets the paper grey */
input::placeholder, textarea::placeholder { color: #6f6a62; opacity: 1; } /* fields are paper in both themes: 4.8:1 on #f4f1ea */

/* ---------- routes between shops (/routes/, home strip; explore.js mode "route") ---------- */
.route { max-width: var(--max); margin-inline: auto; padding: 28px var(--gutter) 64px; }
.route-head h1 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.02; margin: 0 0 12px; }
.route-kicker, .rcard-kicker { margin: 0 0 6px; font: 800 13px/1.3 var(--font-text); letter-spacing: .03em; color: var(--text-2, var(--text)); }
.route-meta { margin: 0; font: 600 16px var(--font-text); color: var(--text-2, var(--text)); }
.route-head .lede { margin: 14px 0 18px; max-width: 60ch; }
.route-tip { max-width: 60ch; margin: 0 0 20px; padding: 10px 14px; border-inline-start: 3px solid var(--accent); background: var(--veil-hover, rgba(255, 240, 215, .06)); border-radius: 6px; }
.route-tip a { color: var(--hi); text-decoration-color: var(--accent); }
.route-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; margin-top: 32px; align-items: start; }
.route-map { isolation: isolate; z-index: 0; height: clamp(340px, 62vh, 620px); border-radius: 10px; position: sticky; top: 88px; }
.route-line { stroke: var(--accent-fill, var(--accent)); }
.route-stops h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 0 0 16px; }
.rstops { list-style: none; margin: 0; padding: 0; }
.rstop { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding-bottom: 22px; scroll-margin-top: 100px; }
.rstop:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 17px; top: 40px; bottom: 4px; border-inline-start: 2px dotted var(--line); }
.rnum { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-fill, var(--accent)); color: var(--on, #fff); font: 800 15px var(--font-head); }
.rstop.is-hit .rnum { animation: rhit 1.1s ease; }
@keyframes rhit { 30% { transform: scale(1.3); box-shadow: 0 0 0 6px var(--veil-hover, rgba(255, 240, 215, .15)); } }
.rbody { min-width: 0; }
.rshop + .rshop { margin-top: 12px; }
.rshop h3 { margin: 4px 0 2px; font: 700 20px/1.25 var(--font-head); }
.rshop h3 a { color: var(--hi); text-decoration-color: var(--series, var(--accent)); text-underline-offset: 4px; }
.raddr { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.rwhy { margin: 0; font-size: 16px; line-height: 1.55; }
.rsame { margin: 4px 0 0; font: 700 12px var(--font-text); color: var(--muted); }
.rleg { margin: 10px 0 0; font: 600 14px var(--font-text); color: var(--muted); }
.route-note { margin: 12px 0 0; max-width: 60ch; color: var(--muted); font-size: 15px; }
.route .sec { margin-top: 56px; }
.rcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.rcards li { display: flex; }
.rcard { flex: 1; display: grid; align-content: start; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.rcard:hover { border-color: var(--accent); background: var(--veil-hover, rgba(255, 240, 215, .06)); }
.rcard b { font: 700 21px/1.25 var(--font-head); color: var(--hi); }
.rcard-kicker { margin: 0; }
.rcard-meta { font: 600 14px var(--font-text); color: var(--text-2, var(--text)); }
.rcard-stops { color: var(--muted); font-size: 14px; line-height: 1.5; }
.pills .pill-route { border-style: dashed; }
@media (max-width: 860px) {
  .route-grid { grid-template-columns: 1fr; gap: 24px; }
  .route-map { position: relative; top: auto; height: 320px; }
}
@media (prefers-reduced-motion: reduce) { .rcard { transition: none; } .rstop.is-hit .rnum { animation: none; } }

/* Map list rows outside the visible part of the list skip style, layout and paint: moving the map shows and hides rows, and every
   row's perforated stamp mask was recalculated each time (worse with photos inside). */
.map-list li { content-visibility: auto; contain-intrinsic-size: auto 120px; }

/* Map list rows show the shop's Google photo inset in its category-colour perforated stamp, like the stamps on shop pages
   (Andrey chose photos over the plain letter, 2026-11-09). The stamp grows with the screen; the letter shows until a photo arrives
   and stays when there is none. The panel is wider on large screens (--mp-w on .explore). */
.ml-thumb { position: relative; overflow: hidden; }
.map-list a { grid-template-columns: clamp(78px, 7vw, 120px) 1fr; }
.ml-thumb { align-self: start; aspect-ratio: 4 / 5; min-height: 0; }
.ml-photo { display: block; position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.ml-photo.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ml-photo { transition: none; } }

/* "Back to Haifa" on the explorer map: bottom centre of the free map area beside the results panel; top centre on a phone,
   where the panel overlaps the bottom of the map and the storefront card sits at the bottom of the screen.
   The map element is dir=ltr (Leaflet), so the side comes from the page direction: the panel is on the left in English, on the right in Hebrew */
.map-back { --mb-off: calc((18px + var(--mp-w, 400px)) / 2);
  position: absolute; z-index: 790; bottom: 22px; left: calc(50% + var(--mb-off)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--page); color: var(--text); font: 700 14px/1.2 var(--font-head, inherit); white-space: nowrap; cursor: pointer;
  box-shadow: 0 6px 18px var(--shadow, rgba(0,0,0,.22)); }
html[dir='rtl'] .map-back { left: calc(50% - var(--mb-off)); }
.map-back::before { content: '↺'; font-size: 16px; line-height: 1; }
.map-back[hidden] { display: none; }
.map-back:hover { border-color: var(--text); }
.map-back:focus-visible { outline: 3px solid var(--accent, currentColor); outline-offset: 2px; }
@media (max-width: 860px) {
  .map-back, html[dir='rtl'] .map-back { --mb-off: 0px; top: 12px; bottom: auto; }
}

/* home search submitted empty: a short hint under the search box instead of opening the map */
.search-empty { margin: 10px 4px 0; color: var(--text-2, inherit); font-size: 15px; }
.search-empty::before { content: '↑ '; color: var(--accent); font-weight: 700; }
.search-empty[hidden] { display: none; }

/* online shop covers (scripts/online-covers.mjs): a logo sits whole on white inside the stamp; a real photo fills it */
.vis-photo.oc-contain, .ml-photo.oc-contain, .mc-photo img.oc-contain { object-fit: contain; background: #fff; box-sizing: border-box; }
.vis-photo.oc-contain { padding: 12%; }
.ml-photo.oc-contain { padding: 6%; }
.mc-photo img.oc-contain { padding: 8% 18%; }
.oc-credit { margin: 10px 0 0; color: var(--muted); font-size: 13px; }