/* Hallmark · custom: stamp album skin (impeccable roll seed:a8895bd37a166e15) · type: Rubik heads, Heebo text (by request) · scope: site · signature: perforated stamp per shop, series colour per interest, one postmark strike */
/* Skin A, the stamp album. Every shop is a perforated stamp in its interest's series colour, set in the clear
   strips of a black stockbook page; the tab under the stamp says why to go; a postmark (neighbourhood + month
   checked) strikes once on the profile. Light stamp paper only on stamps and the practical "back side". */
:root {
  --ink: #1f1c17; --page: #343029; --paper: #f4f1ea; --back: #ebe6da; --text: #efe9dc; --muted: #b3ab9b; --line: rgba(255, 240, 215, .15);
  --on: #fbfaf7; --accent: #dc4b2e; --hi: #fbfaf7; --focus: #f5c13a; --gutter: 4vw; --max: 1440px; --drop: rgba(0, 0, 0, .4);
    --text-2: #d3ccbd; --veil: rgba(255, 240, 215, .05); --veil-hover: rgba(255, 240, 215, .08); --rule-strong: rgba(255, 240, 215, .28);
  --engrave: rgba(255, 240, 215, .12); --glyph: rgba(251, 250, 247, .93); --shadow: rgba(0, 0, 0, .4); --scrim: rgba(0, 0, 0, .22);
  --postmark: rgba(20, 22, 28, .62); --gum: rgba(20, 22, 28, .025); --accent-wash: rgba(220, 75, 46, .16); --accent-edge: rgba(220, 75, 46, .6);
  --paper-rule: #b8b2a4; --ink-1: #1f2228; --ink-2: #4b4f57; --ink-3: #5b5f68; --foot-bg: #29251f; --mask-on: #000; --mask-off: #0000;
  --n-fashion: #c63c22; --n-furniture: #2f7d5b; --n-antiques: #9a6f08; --n-records: #1d4fa3; --n-books: #6b4aa8; --n-specialty: #b8336f;
}
[data-niche='vintage-fashion'] { --series: var(--n-fashion); } [data-niche='furniture-design'] { --series: var(--n-furniture); }
[data-niche='antiques-collectibles'] { --series: var(--n-antiques); } [data-niche='records-music'] { --series: var(--n-records); }
[data-niche='books-print'] { --series: var(--n-books); } [data-niche='specialty'] { --series: var(--n-specialty); }
body { background: var(--page); color: var(--text); }

/* perforations: four edge masks intersected */
.card-vis, .card-why, .paper, .mini, .ml-thumb, .pk-glyph, .pin, .specialties li, .chip, .brand-mark {
  --r: 4px; --t: 12px;
}
.paper, .mini, .ml-thumb, .pk-glyph, .pin, .specialties li, .chip, .brand-mark {
  -webkit-mask:
    radial-gradient(circle at 50% 0, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat,
    radial-gradient(circle at 50% 100%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat,
    radial-gradient(circle at 0 50%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / 100% var(--t) no-repeat round,
    radial-gradient(circle at 100% 50%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / 100% var(--t) no-repeat round;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 50% 0, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat,
    radial-gradient(circle at 50% 100%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat,
    radial-gradient(circle at 0 50%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / 100% var(--t) no-repeat round,
    radial-gradient(circle at 100% 50%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / 100% var(--t) no-repeat round;
  mask-composite: intersect;
}
.engraved { background-color: var(--series); background-image: repeating-linear-gradient(135deg, var(--engrave) 0 1px, transparent 1px 7px); }

.top { background: var(--page); border-bottom: 1px solid var(--line); }
.brand { font: 800 26px/1 var(--font-head); color: var(--hi); }
.brand-mark { --r: 2.5px; --t: 7px; width: 22px; height: 26px; background: var(--accent-fill, var(--accent)); }
.top-nav a { color: var(--text-2); font-weight: 600; padding-block: 6px; border-bottom: 2px solid transparent; }
.top-nav a:hover, .top-nav a[aria-current] { color: var(--hi); border-color: var(--accent); }
.lang { font-weight: 700; color: var(--text-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }

h1 { color: var(--hi); font-weight: 800; }
h2 { color: var(--hi); font-weight: 700; }
.lede { color: var(--text-2); }
.hero h1 { font-size: clamp(44px, 6.2vw, 92px); line-height: 1.02; letter-spacing: -.01em; }
.search-plate { background: var(--paper); border-radius: 10px; box-shadow: 0 0 0 0 transparent, 0 10px 30px var(--shadow); outline: 3px solid transparent; outline-offset: 0; transition: box-shadow .35s cubic-bezier(.22, 1, .36, 1), outline-color .2s ease, outline-offset .35s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1); }
.search-plate:hover { box-shadow: 0 0 0 0 transparent, 0 12px 34px var(--shadow); }
.search-plate input { color: var(--ink); }
.search-plate:focus-within { outline-color: var(--accent); outline-offset: 3px; transform: translateY(-2px); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent), 0 16px 40px var(--shadow); }
@media (prefers-reduced-motion: reduce) { .search-plate, .search-plate:focus-within { transition: outline-color .01s; transform: none; } }
.search-plate button { background: var(--accent-fill, var(--accent)); color: var(--on); border-radius: 7px; font: 700 17px var(--font-head); }
.quick a { font-size: 15px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.quick a:hover { border-color: var(--accent); color: var(--hi); }
.strip { padding: 26px 22px 22px; background: linear-gradient(var(--veil-hover), var(--veil)); border-top: 1px solid var(--rule-strong); }
.sec-h h2 { font-size: clamp(28px, 3vw, 40px); }
.sec-h p { color: var(--muted); }
.sec-h a { color: var(--hi); font-weight: 600; text-decoration-color: var(--accent); text-underline-offset: 5px; }

/* the stamp */
.card { color: var(--ink-1); filter: drop-shadow(0 8px 16px var(--shadow)); transition: transform .2s ease; }
.paper { background: var(--paper); padding: 11px; }
a.card:hover { transform: translateY(-4px) rotate(-.6deg); }
.card-vis { background-color: var(--series); background-image: repeating-linear-gradient(135deg, var(--engrave) 0 1px, transparent 1px 7px); aspect-ratio: 5/4; font-size: 120px; }
.card-glyph { position: absolute; inset-inline-start: 8%; bottom: -.1em; font: 800 1em/1 var(--font-head); color: var(--glyph); }
.card-body { padding: 10px 2px 2px; }
.card-kicker { font: 800 12px/1.3 var(--font-text); letter-spacing: .02em; color: color-mix(in srgb, var(--series) 62%, var(--ink)); }
.card-name { font: 700 20px/1.15 var(--font-head); }
.card-meta { font: 500 13px/1.3 var(--font-text); color: var(--ink-3); }
.card-why { margin: 10px -11px -11px; padding: 9px 14px 12px; font: 500 13.5px/1.4 var(--font-text); color: var(--ink-1); border-top: 1px dashed var(--paper-rule); }
.card-s .card-vis { aspect-ratio: 1; font-size: 96px; } .card-s .card-name { font-size: 16px; } .card-s .card-why { display: none; }
.card-l .card-vis { aspect-ratio: 4/5; font-size: 200px; } .card-l .card-name { font-size: 24px; }
.card-xl .card-vis { aspect-ratio: 4/5; font-size: 300px; } .card-xl .card-name { font-size: 28px; }
.card.is-static { filter: drop-shadow(0 12px 24px var(--shadow)); }
.photo-note { color: var(--on); background: var(--scrim); }
.card-sponsored { color: var(--ink-3); }

.postmark { color: var(--postmark); pointer-events: none; mix-blend-mode: multiply; }
.postmark text { fill: currentColor; font-family: var(--font-text); }
.pm-a { font-size: 14px; font-weight: 800; } .pm-b { font-size: 10.5px; font-weight: 600; }
.postmark.on-card { position: absolute; width: 170px; top: 40%; inset-inline-end: 48%; transform: rotate(-12deg); }
.postmark.strike { position: absolute; width: 230px; top: 50%; inset-inline-start: 62%; transform: rotate(-12deg); animation: strike .5s .5s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes strike { 0% { opacity: 0; transform: scale(1.7) rotate(-22deg); } 70% { opacity: 1; transform: scale(.95) rotate(-12deg); } 100% { opacity: 1; transform: scale(1) rotate(-12deg); } }

.series { border: 1px solid var(--line); border-radius: 6px; background: var(--veil); transition: background .2s; }
.series:hover { background: var(--veil-hover); }
.mini { --r: 2.5px; --t: 8px; background-color: var(--series); background-image: repeating-linear-gradient(135deg, var(--engrave) 0 1px, transparent 1px 6px); }
.mini.empty { background: transparent; -webkit-mask: none; mask: none; outline: 1px dashed var(--rule-strong); outline-offset: -1px; }
.series-name { font: 700 21px/1.2 var(--font-head); color: var(--hi); align-self: end; }
.series-count { font-size: 14px; color: var(--muted); align-self: start; }
.place { border: 1px solid var(--line); border-radius: 6px; background: var(--veil); }
.place-city b { font: 800 28px var(--font-head); color: var(--hi); }
.place-city small { color: var(--muted); }
.place-hoods a { font-size: 14px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.place-hoods a:hover { border-color: var(--accent); }
.place-hoods small, .pills small { color: var(--muted); }
.mapband { background: var(--paper); color: var(--ink); border-radius: 6px; font: 800 clamp(26px, 3.4vw, 44px) var(--font-head); }
.mapband:hover { background: var(--hi); }

/* profile */
.crumbs { color: var(--muted); }
.kicker { color: var(--muted); }
.profile-title h1 { font-size: clamp(40px, 5vw, 76px); line-height: 1.02; }
.intro { color: var(--text); }
.why { padding: 26px 30px; background: var(--veil); border: 1px solid var(--line); border-radius: 6px; }
.why h2 { font-size: 15px; color: var(--muted); font-family: var(--font-text); font-weight: 700; margin-bottom: 6px; }
.why p { font: 600 clamp(20px, 2.2vw, 28px)/1.35 var(--font-head); color: var(--hi); max-width: 48ch; }
.read { color: var(--text-2); }
.specialties li { --r: 2.5px; --t: 8px; background: var(--paper); color: var(--ink); font-weight: 600; font-size: 15px; padding: 8px 14px; }
.sources { color: var(--muted); }
.sources a { color: var(--text-2); }
.facts { color: var(--ink); background-color: var(--back); background-image: repeating-linear-gradient(45deg, var(--gum) 0 2px, transparent 2px 9px); border-radius: 4px; }
.facts h2 { color: var(--ink); }
.facts dl div { border-bottom: 1px dashed var(--paper-rule); }
.facts dt { color: var(--ink-2); }
.btn { background: var(--ink); color: var(--paper); border-radius: 8px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.prose .btn.ghost { color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }
.prose a.btn:not(.ghost) { color: var(--paper); } /* .prose a would otherwise recolour the button text */
:root[data-theme='light'] .prose .btn.ghost { color: var(--hi); box-shadow: inset 0 0 0 2px var(--hi); }
.mini-map { border-radius: 4px; }
.related a, .pills a { font-weight: 600; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.related a:hover, .pills a:hover { border-color: var(--accent); color: var(--hi); }
.text-link { color: var(--hi); text-decoration-color: var(--accent); text-underline-offset: 5px; }

/* explorer */
.explore .leaflet-tile-pane, .mapview .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(1.1) contrast(.78); }
.map-panel { background: var(--page); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }
.map-search input { background: var(--paper); border-radius: 8px; color: var(--ink); }
.chip { --r: 2px; --t: 7px; background: var(--paper); color: var(--ink); }
.chip.on { background: var(--accent-fill, var(--accent)); color: var(--on); }
.chip[data-niche].on { background: var(--series, var(--accent)); }
.map-count { color: var(--muted); border-bottom: 1px solid var(--line); }
.map-list a { border-radius: 6px; }
.map-list a:hover { background: var(--veil-hover); }
.map-list a.on { background: var(--accent-wash); outline: 1px solid var(--accent-edge); outline-offset: -1px; }
.ml-thumb { --r: 2.5px; --t: 8px; background-color: var(--series); background-image: repeating-linear-gradient(135deg, var(--engrave) 0 1px, transparent 1px 6px); color: var(--on); font: 800 26px var(--font-head); }
.ml-text b { font: 700 17px/1.2 var(--font-head); color: var(--hi); }
.pin { --r: 2px; --t: 7px; background: var(--series); color: var(--on); font: 800 15px var(--font-head); filter: drop-shadow(0 3px 5px var(--shadow)); }
.pin.on { background: var(--hi); color: var(--accent); }
.near-me { background: var(--paper); color: var(--ink); border-radius: 999px; font: 700 15px var(--font-head); box-shadow: 0 8px 20px var(--shadow); }

.prose a { color: var(--hi); text-decoration-color: var(--accent); }
.prose small, .link-cols small { color: var(--muted); }
.foot { background: var(--foot-bg); color: var(--text-2); }
.foot-brand { font: 800 34px/1 var(--font-head); color: var(--hi); }
.foot-brand small { font: 500 15px var(--font-text); color: var(--muted); }
.foot-cols h2 { color: var(--hi); }
.foot-cols .soon { color: var(--muted); }
.foot-base { color: var(--muted); border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .postmark.strike { inset-inline-start: 55%; width: 180px; }
  .postmark.on-card { width: 140px; }
}
/* onboarding: a first-day cover on the album page */
.onb { background: var(--paper); color: var(--ink); border-radius: 4px; }
.onb h2 { color: var(--ink); }
.onb-n { --r: 2.5px; --t: 7px; background: var(--accent-fill, var(--accent)); color: var(--on); -webkit-mask: radial-gradient(circle at 50% 0, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat, radial-gradient(circle at 50% 100%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat; -webkit-mask-composite: source-in; mask: radial-gradient(circle at 50% 0, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat, radial-gradient(circle at 50% 100%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat; mask-composite: intersect; }
.onb p { color: var(--ink-2); }

/* ---- finish-review batch: glassine strips, album rows, index sections, se-tenant sheets, profile back ---- */
:root { --glass: rgba(244, 241, 234, .06); --glass-top: rgba(244, 241, 234, .14); --glass-edge: rgba(251, 250, 247, .36); }
.strip { position: relative; background: none; border-top: 0; padding: 30px 22px 22px; }
.strip::after { content: ''; position: absolute; inset-inline: 0; bottom: 12px; height: 40%; background: linear-gradient(var(--glass-top), var(--glass)); border-top: 1px solid var(--glass-edge); pointer-events: none; }
.hero-cards .strip::after { height: 34%; }
.strip.joined { gap: 0; }
.strip.joined .card { filter: drop-shadow(0 6px 10px var(--shadow)); }
.card-kicker { display: none; }
.card-inscr { font: 800 12px/1.2 var(--font-text); letter-spacing: .03em; color: var(--on); opacity: .92; }
.card-xl .card-inscr { font-size: 14px; top: 12px; inset-inline-start: 14px; }
.card-why { margin: 10px -11px -11px; }
.card-xl .card-why { margin-top: 0; padding: 14px 16px 16px; font: 600 17px/1.45 var(--font-head); color: var(--ink-1); }
.postmark.on-card { position: absolute; width: 150px; top: 8%; inset-inline-end: 6%; inset-inline-start: auto; z-index: 2; }
.postmark.strike { position: absolute; width: 200px; top: 6%; inset-inline-end: 4%; inset-inline-start: auto; z-index: 2; }
/* index sections: album contents page, no card chrome */
.series-grid { display: block; border-top: 1px solid var(--line); }
.series { grid-template-columns: auto 1fr auto; column-gap: 22px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 16px 4px; }
.series:hover { background: var(--veil); }
.sheet { grid-row: auto; grid-template-columns: repeat(4, 22px); gap: 3px; }
.mini { height: 26px; --t: 6px; --r: 2px; }
.series-name { align-self: center; font-size: 24px; }
.series-count { align-self: center; }
.place-grid { display: block; border-top: 1px solid var(--line); }
.place { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; align-items: baseline; gap: 10px 30px; padding: 18px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.place-city { justify-content: flex-start; gap: 14px; }
.place-hoods { margin-top: 0; }
.place-other .place-city b { font-size: 22px; color: var(--text-2); }
.sheet-h h2, .sheet-h h2 a { color: var(--hi); }
.sheet-count { color: var(--muted); }
.postmark.on-sheet { color: var(--glass-edge); mix-blend-mode: normal; }
/* profile: facts are the stamp's gummed back, beside it */
.profile-title .facts { padding: 22px 24px; }
.profile-map .btn.ghost { color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }
.mapband .arrow { width: 44px; height: 44px; }
/* onboarding: a first-day cover */
.onb { padding-top: 26px; }
.onb .postmark { display: block; position: absolute; width: 120px; top: 10px; inset-inline-end: 54px; transform: rotate(-8deg); }
.onb-stamp { --r: 2px; --t: 7px; display: block; position: absolute; top: 14px; inset-inline-end: 16px; width: 34px; height: 42px; background-color: var(--accent); background-image: repeating-linear-gradient(135deg, var(--engrave) 0 1px, transparent 1px 6px); -webkit-mask: radial-gradient(circle at 50% 0, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat, radial-gradient(circle at 50% 100%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat; -webkit-mask-composite: source-in; mask: radial-gradient(circle at 50% 0, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat, radial-gradient(circle at 50% 100%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat; mask-composite: intersect; }
.onb h2 { padding-inline-end: 150px; min-height: 40px; }
@media (max-width: 860px) {
  .place { grid-template-columns: 1fr; }
  .postmark.strike { width: 150px; }
  .postmark.on-card { width: 120px; }
}
/* a strip is as wide as the stamps it holds, so the glassine never runs on empty */
.strip { width: max-content; max-width: 100%; }
.strip::after { background: linear-gradient(var(--glass-top), var(--glass)); }
.hero-cards .strip { margin-inline: auto; }
/* postmark ink must read on every series colour: solid light ink on vignettes, muted ink on the album page */
:root { --n-antiques: #7f5b06; }
.card-vis .postmark { color: var(--on); mix-blend-mode: normal; opacity: 1; }
.postmark.on-sheet { color: var(--muted); }

/* ---- verdict batch 2: rows fill the measure, stamps scale with their slot, band per stamp on phones ---- */
.strip { width: 100%; justify-content: center; align-items: flex-end; }
.strip > .card { container-type: inline-size; min-width: 0; }
.strip > .card-l { flex: 0 1 400px; } .strip > .card-m { flex: 0 1 300px; } .strip > .card-s { flex: 0 1 210px; }
.strip > .card .card-vis { font-size: 62cqw; }
.strip > .card-s .card-why { display: block; font-size: 12.5px; }
.strip.joined { justify-content: center; }
.hero-cards .strip { width: max-content; }
.hero-cards .strip > .card-l { flex: none; width: 280px; } .hero-cards .stack .card-s { width: 150px; }
html[lang='en'] .pm-a { font-size: 12px; } html[lang='en'] .pm-b { font-size: 10px; }
@media (max-width: 860px) {
  .strip::after { display: none; }
  .strip > .card::after { content: ''; position: absolute; inset-inline: -6px; bottom: 0; height: 38%; background: linear-gradient(var(--glass-top), var(--glass)); border-top: 1px solid var(--glass-edge); pointer-events: none; }
  .strip > .card-l, .strip > .card-m, .strip > .card-s { flex: 1 1 42%; }
  .strip > .card-l { flex-basis: 100%; }
}

/* photos inside stamps: frame stays series-coloured, postmark stays struck over the picture */
.card.has-photo .card-vis .postmark { filter: drop-shadow(0 1px 2px var(--shadow)); }
.card-inscr { z-index: 2; }
.card-vis .postmark { z-index: 3; }
.g-frame { --r: 2.5px; --t: 8px; background: var(--paper);
  -webkit-mask: radial-gradient(circle at 50% 0, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat, radial-gradient(circle at 50% 100%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat, radial-gradient(circle at 0 50%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / 100% var(--t) no-repeat round, radial-gradient(circle at 100% 50%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / 100% var(--t) no-repeat round;
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at 50% 0, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat, radial-gradient(circle at 50% 100%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / var(--t) 100% round no-repeat, radial-gradient(circle at 0 50%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / 100% var(--t) no-repeat round, radial-gradient(circle at 100% 50%, var(--mask-off) var(--r), var(--mask-on) calc(var(--r) + .5px)) 0 0 / 100% var(--t) no-repeat round;
  mask-composite: intersect; }
.g-photo { filter: drop-shadow(0 6px 12px var(--shadow)); }
/* no photo: plain series-coloured tiles in the gallery row */
.g-empty .g-frame { display: block; aspect-ratio: 1; background-color: var(--series, var(--accent)); background-image: repeating-linear-gradient(135deg, var(--engrave) 0 1px, transparent 1px 7px); opacity: .55; }

/* ============ light theme (the only theme; set on <html> by the build) ============ */
:root[data-theme='light'] {
  --page: #f1ece1; --paper: #fffdf8; --back: #e7e0d0; --text: #23262d; --muted: #5d626b; --line: rgba(20, 22, 28, .14);
  --accent: #b5311a; --hi: #14161c; --on: #fff; --focus: #0b57d0; --text-2: #3b3f47;
  --veil: rgba(20, 22, 28, .045); --veil-hover: rgba(20, 22, 28, .075); --rule-strong: rgba(20, 22, 28, .3);
  --shadow: rgba(60, 45, 20, .2); --drop: rgba(60, 45, 20, .2); --gum: rgba(20, 22, 28, .03);
  --accent-wash: rgba(181, 49, 26, .1); --accent-edge: rgba(181, 49, 26, .5); --foot-bg: #e6dfcf;
  --star: #7d5200; color-scheme: light;
}
/* contrast (WCAG AA 4.5:1): white text sits on a deeper red than the brand red, and red text on paper uses the paper red */
:root { --accent-fill: #c43d1f; --accent-on-paper: #b5311a; }
:root[data-theme='light'] { --accent-fill: var(--accent); }
:root[data-theme='light'] .explore .leaflet-tile-pane, :root[data-theme='light'] .mapview .leaflet-tile-pane { filter: grayscale(.35) contrast(.95) brightness(1.02); }
:root[data-theme='light'] .mapband:hover { background: #fff; }
:root[data-theme='light'] .pin.on { background: #fff; color: var(--accent); }
:root[data-theme='light'] .map-search input { background: #fff; box-shadow: 0 0 0 1px var(--line); }
:root[data-theme='light'] .g-credit { background: rgba(20, 22, 28, .66); }
:root[data-theme='light'] .fbadge, :root[data-theme='light'] .seg input:checked + span, :root[data-theme='light'] .fshow { color: #fff; }
:root[data-theme='light'] .me-wrap .me { border-color: #fff; }
.top-tools { display: flex; align-items: center; margin-inline-start: auto; }
.top-tools .lang { margin-inline-start: 0; }

/* ---- featured gallery: auto-sliding, three stamps a slide, sizes stay close ---- */
.gallery { position: relative; }
.g-view { position: relative; overflow: hidden; padding-block: 6px 0; }
.g-track { display: grid; }
.g-slide.strip { grid-area: 1 / 1; align-self: start; transition: transform .8s cubic-bezier(.65, 0, .35, 1); width: 100%; max-width: none; box-sizing: border-box; justify-content: center; align-items: flex-end; gap: 28px; }
.g-slide.strip > .card-s { flex: 0 1 230px; }
.g-slide.strip > .card-m { flex: 0 1 260px; }
.g-slide.strip > .card-l { flex: 0 1 292px; }
.g-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.g-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: var(--rule-strong); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.g-dots button[aria-current='true'] { width: 28px; background: var(--accent-fill, var(--accent)); }
@media (max-width: 860px) {
  .g-slide.strip > .card-s, .g-slide.strip > .card-m, .g-slide.strip > .card-l { flex: 0 1 44%; }
  .g-slide.strip { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .g-slide.strip { transition: none !important; } }

/* ---- home: each section reads as its own page of the album ---- */
.is-home .sec { margin-top: 64px; padding-top: 44px; padding-bottom: 8px; border-top: 1px solid color-mix(in srgb, var(--rule-strong) 45%, transparent); }
.is-home .hero { padding-bottom: 24px; }
.is-home .mapband { margin-top: 64px; }
@media (max-width: 860px) { .is-home .sec { margin-top: 52px; padding-top: 34px; } .is-home .mapband { margin-top: 52px; } }

.g-dots { justify-content: center; width: 100%; }
.g-btn { position: absolute; top: 40%; translate: 0 -50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--paper); color: var(--ink-1); cursor: pointer; box-shadow: 0 6px 16px var(--shadow); transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.g-btn:hover { background: var(--accent-fill, var(--accent)); color: var(--on); transform: scale(1.08); }
.g-prev { inset-inline-start: 4px; } .g-next { inset-inline-end: 4px; }
html[dir='rtl'] .g-btn svg { transform: scaleX(-1); }
.g-next svg { transform: scaleX(-1); } html[dir='rtl'] .g-next svg { transform: none; }
@media (max-width: 860px) { .g-btn { width: 38px; height: 38px; } }

/* ================= round 3 ================= */

/* gallery: one full-width row per slide */
.g-slide.strip { display: flex; flex-wrap: nowrap; justify-content: stretch; align-items: flex-end; gap: 24px; width: 100%; max-width: none; }
.g-slide.strip > .card { width: auto; max-width: none; min-width: 0; flex: 1 1 0; }
.g-slide.strip > .card-s { flex-grow: .88; } .g-slide.strip > .card-m { flex-grow: 1; } .g-slide.strip > .card-l { flex-grow: 1.12; }
.g-slide.strip > .card .card-vis { aspect-ratio: 4 / 3; font-size: 36cqw; }
.g-slide.strip > .card .card-name { font-size: 22px; }
.g-slide.strip > .card .card-why { display: block; font-size: 14px; }
@media (max-width: 860px) {
  .g-slide.strip { gap: 12px; }
  .g-slide.strip > .card-s, .g-slide.strip > .card-m, .g-slide.strip > .card-l { flex-basis: 0; }
  .g-slide.strip > .card .card-name { font-size: 16px; }
  .g-slide.strip > .card .card-why, .g-slide.strip > .card .card-meta { display: none; }
}
/* gallery buttons: still, faint, wake up on hover */
.g-btn { top: 38%; opacity: .38; box-shadow: none; transition: opacity .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; }
.g-btn:hover, .g-btn:focus-visible { opacity: 1; transform: none; background: var(--accent-fill, var(--accent)); color: var(--on); border-color: var(--accent); box-shadow: 0 6px 16px var(--shadow); }

/* loading: shimmer until the photo / tiles arrive */
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
a.card[data-place-id]:not(.has-photo):not(.no-photo) .card-vis::after,
a.card[data-place-query]:not(.has-photo):not(.no-photo) .card-vis::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%) 200% 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.map-card.is-loading .mc-vis::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%) 200% 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.mc-photo { animation: fadein .6s ease both; }
.vis-photo { opacity: 0; transition: opacity .6s ease; }
.card.has-photo .vis-photo { opacity: 1; }
.card.has-photo .card-glyph { display: block; opacity: 0; transition: opacity .6s ease; }
.mc-photo img { animation: fadein .6s ease both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.map-ground:not(.is-ready)::after, #map:not(.is-ready)::after {
  content: ''; position: absolute; inset: 0; z-index: 500; pointer-events: none;
  background: linear-gradient(100deg, var(--veil) 30%, var(--veil-hover) 50%, var(--veil) 70%) 200% 0 / 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
#map::after { transition: opacity .5s ease; }
#map:not(.map-ground) { position: relative; }
@media (prefers-reduced-motion: reduce) { .card .card-vis::after, #map::after, .map-card .mc-vis::after, .mc-photo { animation: none !important; } }

/* page transitions: old page stays until the new one can paint, then they cross-fade */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .38s cubic-bezier(.22, 1, .36, 1) both; }
header.top { view-transition-name: site-top; }
::view-transition-group(site-top) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@supports not (view-transition-name: a) { main { animation: vt-in .45s cubic-bezier(.22, 1, .36, 1) both; } }

/* city picker */
@keyframes pk-in { from { opacity: 0; transform: translateY(10px); } }
.pk-group + .pk-group { margin-top: 24px; }
/* "Nearby" on place pages with fewer than three shops (build.mjs nearbyBlock): the home picker's lists, as a page section */
.near-block { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--paper-rule); }
.near-block .near-h { margin: 0 0 12px; font: 700 13px/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pk-group h4 { margin: 0 0 12px; font: 700 13px/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--series, var(--accent)); }
.pk-shops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pk-shops a { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: start; height: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--paper-rule); border-radius: 10px; color: var(--ink-1); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.pk-shops a:hover { border-color: var(--series, var(--accent)); transform: translateY(-2px); }
.pk-glyph { --r: 2px; --t: 7px; display: grid; place-items: center; width: 46px; height: 52px; background-color: var(--series); background-image: repeating-linear-gradient(135deg, var(--engrave) 0 1px, transparent 1px 6px); color: var(--on); font: 800 22px var(--font-head); }
.pk-shops b { display: block; font: 700 16px/1.25 var(--font-head); }
.pk-shops small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13px; }
.pk-shops em { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-style: normal; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.pk-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pk-links a { color: var(--ink-1); font-weight: 700; text-decoration: underline; text-decoration-color: var(--paper-rule); text-underline-offset: 3px; }
.pk-links a:hover { text-decoration-color: currentColor; }
.pk-links small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.pk-other { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin: 26px 0 0; color: var(--muted); }
.pk-other a { color: var(--text-2); }

/* "By location" on the home page (approved target, corrected handoff 2026-11-09): slim city directory beside the chosen city, whose
   content sits under three tabs (Explore / Walking routes / Markets & fairs). On the page itself, no enclosing card. Logical
   properties throughout, so Hebrew mirrors from the page direction (directory on the right). */
.loc { display: grid; grid-template-columns: clamp(240px, 22%, 330px) minmax(0, 1fr); gap: 0 clamp(28px, 3.4vw, 52px); align-items: start; }
.loc-side h2 { margin: 0 0 22px; font-size: clamp(26px, 2.4vw, 34px); }
.loc-pick { display: none; }
.loc-tabs { display: grid; gap: 2px; }
.loc-tab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 9px 14px; border: 0; border-inline-start: 4px solid transparent; border-radius: 0 10px 10px 0; background: none; color: var(--hi); font: inherit; text-align: start; cursor: pointer; transition: background-color .2s ease; }
[dir='rtl'] .loc-tab { border-radius: 10px 0 0 10px; }
.loc-tab-name { font: 700 17px/1.2 var(--font-head); }
.loc-tab small { color: var(--muted); font-size: 14px; white-space: nowrap; }
.loc-tab:hover { background: var(--veil); }
.loc-tab[aria-selected='true'] { background: var(--paper); border-inline-start-color: var(--accent); box-shadow: 0 4px 14px var(--shadow); }
.loc:not(.is-js) .loc-tabs { display: none; }
/* the chosen city sits on a white sheet with rounded corners and a soft shadow (as the old picker panel did), so the section
   stands apart from the plain page around it. The sheet is light in both themes, so in the dark theme the text tokens switch to ink. */
.loc-main { padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.6vw, 38px); background: var(--paper); border-radius: 14px; box-shadow: 0 14px 34px var(--shadow); }
:root:not([data-theme='light']) .loc-main { --hi: var(--ink-1); --text-2: var(--ink-2); --muted: var(--ink-3); --line: rgba(20, 22, 28, .14); --rule-strong: rgba(20, 22, 28, .3); --veil: rgba(20, 22, 28, .045); --veil-hover: rgba(20, 22, 28, .075); --accent: var(--accent-on-paper); color: var(--ink-1); }
:root:not([data-theme='light']) .loc-main .loc-map, :root:not([data-theme='light']) .loc-main .loc-go { color: var(--accent); }
.loc:not(.is-js) .loc-city + .loc-city { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.loc-city.is-in { animation: pk-in .4s cubic-bezier(.22, 1, .36, 1) both; }

.loc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; }
.loc-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; font: 800 clamp(32px, 3.6vw, 48px)/1.05 var(--font-head); color: var(--hi); }
.loc-total { padding: 5px 14px; border-radius: 99px; background: var(--veil-hover); color: var(--text-2); font: 500 16px/1.2 var(--font-text); white-space: nowrap; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.loc-all, .loc-map { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; box-sizing: border-box; padding: 9px 22px; border-radius: 999px; font: 700 17px/1.2 var(--font-head); text-decoration: none; transition: background-color .2s ease, box-shadow .2s ease; }
.loc-all { background: var(--accent-fill, var(--accent)); color: var(--on); }
.loc-all:hover { box-shadow: 0 8px 20px var(--shadow); }
.loc-all .arrow, .loc-go .arrow { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
.loc-all:hover .arrow, .loc-go:hover .arrow { transform: translateX(-4px); }
html[dir='ltr'] .loc-all .arrow, html[dir='ltr'] .loc-go .arrow { transform: scaleX(-1); }
html[dir='ltr'] .loc-all:hover .arrow, html[dir='ltr'] .loc-go:hover .arrow { transform: scaleX(-1) translateX(-4px); }
.loc-map { border: 2px solid var(--accent); color: var(--accent); }
.loc-map .pin-ico { width: 20px; height: 20px; }
:root:not([data-theme='light']) .loc-map { color: var(--hi); }
.loc-map:hover { background: var(--accent-wash); }

/* content tabs: slim accent underline on the selected one, count badges apart from the label */
.loc-ctabs { display: flex; flex-wrap: wrap; margin-top: 22px; border-bottom: 1px solid var(--line); }
.loc-ctab { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 22px; border: 0; background: none; color: var(--hi); font: 700 18px/1.2 var(--font-head); cursor: pointer; }
.loc-ctab + .loc-ctab::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; height: 26px; margin-top: -13px; border-inline-start: 1px solid var(--line); }
.loc-ctab::after { content: ''; position: absolute; inset-inline: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background-color .2s ease; }
.loc-ctab[aria-selected='true'] { color: var(--accent); }
.loc-ctab[aria-selected='true']::after { background: var(--accent); }
.loc-ctab:hover::after { background: var(--line); }
.loc-ctab[aria-selected='true']:hover::after { background: var(--accent); }
.loc-badge { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; box-sizing: border-box; border-radius: 99px; background: var(--veil-hover); color: var(--text-2); font: 700 14px/1 var(--font-text); }
.loc:not(.is-js) .loc-ctabs { display: none; }
.loc-nojs { display: none; }
.loc:not(.is-js) .loc-nojs { display: block; }

.loc-cpanel { padding-top: 6px; }
.loc-group { padding: 28px 0; }
.loc-group + .loc-group, .loc-group + .loc-plan { border-top: 1px dashed var(--rule-strong); }
.loc-group h4, .loc-cpanel .loc-nojs { margin: 0 0 18px; font: 800 clamp(22px, 2vw, 28px)/1.2 var(--font-head); color: var(--hi); }
.loc-hoods, .loc-cats, .loc-shops, .loc-links { list-style: none; margin: 0; padding: 0; }
.loc-hoods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.loc-hoods a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 10px 14px 10px 18px; border: 1px solid var(--rule-strong); border-radius: 10px; color: var(--hi); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
[dir='rtl'] .loc-hoods a { padding: 10px 18px 10px 14px; }
.loc-hoods b { font: 700 18px/1.2 var(--font-head); }
.loc-hoods small, .loc-cats small { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; box-sizing: border-box; border-radius: 99px; background: var(--veil-hover); color: var(--text-2); font-size: 15px; font-weight: 600; }
.loc-hoods a:hover { border-color: var(--accent); background: var(--accent-wash); }
.loc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
/* each category is one outlined box, linked as a whole, like the neighbourhood links (Andrey, 2026-11-09) */
.loc-cats a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; height: 100%; box-sizing: border-box; padding: 10px 14px 10px 18px; border: 1px solid var(--rule-strong); border-radius: 10px; color: var(--hi); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
[dir='rtl'] .loc-cats a { padding: 10px 18px 10px 14px; }
.loc-cats a:hover { border-color: var(--series, var(--accent)); background: color-mix(in srgb, var(--series, var(--accent)) 7%, transparent); }
.loc-cats b { font: 700 17px/1.3 var(--font-head); }
.loc-cats .pk-dot { width: 12px; height: 12px; }
.loc-shops { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.loc-shops a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--rule-strong); border-radius: 10px; color: var(--hi); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.loc-shops a:hover { border-color: var(--series, var(--accent)); background: var(--veil); }
.loc-shops .pk-glyph { width: 52px; height: 58px; font-size: 24px; }
.loc-shops b { display: block; font: 700 18px/1.25 var(--font-head); }
.loc-shops small { display: block; margin-top: 4px; color: var(--text-2); font-size: 14px; }
.loc-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 22px 0 4px; }
.loc-plan-h { color: var(--text-2); font: 700 18px/1.2 var(--font-head); }
.loc-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); font: 700 18px/1.2 var(--font-head); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; cursor: pointer; }
.loc-go + .loc-go { padding-inline-start: 28px; border-inline-start: 1px solid var(--line); }
:root:not([data-theme='light']) .loc-go { color: var(--hi); text-decoration-color: var(--accent); }
.loc-links { display: grid; }
.loc-links li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.loc-links a { color: var(--hi); font: 700 19px/1.3 var(--font-head); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.loc-links a:hover { text-decoration-thickness: 3px; }
.loc-links small { display: block; margin-top: 6px; color: var(--text-2); font-size: 15px; }
.loc-empty { margin: 22px 0; color: var(--text-2); }
.loc:not(.is-js) .loc-cpanel + .loc-cpanel { margin-top: 28px; }

/* phones: the long directory becomes a labelled native select above the city (only one city control is ever available) */
@media (max-width: 860px) {
  .loc { grid-template-columns: 1fr; }
  .loc-side h2 { margin-bottom: 14px; }
  .loc.is-js .loc-pick { display: grid; gap: 8px; margin-bottom: 26px; }
  .loc-pick label { color: var(--text-2); font-size: 15px; }
  .loc-select { position: relative; display: block; }
  .loc-select::after { content: ''; position: absolute; inset-inline-end: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); pointer-events: none; }
  .loc-select select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 50px; padding-block: 10px; padding-inline: 16px 48px; border: 1.5px solid var(--hi); border-radius: 10px; background: var(--paper); color: var(--hi); font: 700 17px/1.2 var(--font-head); }
  .loc-select select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .loc.is-js .loc-tabs { display: none; }
  .loc-main { padding: 20px 16px; border-radius: 12px; }
  .loc-actions { width: 100%; }
  .loc-all, .loc-map { flex: 1 1 auto; }
  /* three equal tabs across; a long label wraps inside its own tab */
  .loc-ctabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loc-ctab { justify-content: center; flex-wrap: wrap; gap: 4px 8px; padding: 8px 6px; font-size: 15px; text-align: center; }
  .loc-badge { min-width: 24px; height: 24px; font-size: 13px; }
  .loc-plan { flex-direction: column; align-items: flex-start; gap: 6px; }
  .loc-go + .loc-go { padding-inline-start: 0; border-inline-start: 0; }
  .loc-hoods { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .loc-group { padding: 22px 0; }
}
@media (prefers-reduced-motion: reduce) { .loc-city.is-in { animation: none; } }

.g-track { grid-template-columns: minmax(0, 1fr); }

.gallery[data-gallery] { display: block; margin-top: 0; }
.gallery[data-gallery] .g-view { width: 100%; }

/* home search suggestions */
.search-plate { position: relative; }
.search-plate.sg-open { border-end-start-radius: 10px; border-end-end-radius: 10px; }
.sg-panel { position: absolute; inset-inline: 0; top: calc(100% + 10px); z-index: 60; padding: 8px; background: var(--paper); color: var(--ink-1); border-radius: 14px; box-shadow: 0 22px 50px var(--shadow), 0 0 0 1px var(--paper-rule); animation: sg-in .22s cubic-bezier(.22, 1, .36, 1) both; transform-origin: top center; }
@keyframes sg-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.sg-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: inherit; text-decoration: none; }
.sg-item.is-active, .sg-map.is-active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sg-chip { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: var(--series, var(--accent)); color: var(--on); font: 800 22px/1 var(--font-head); }
.sg-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sg-text b { font: 700 17px/1.2 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-text mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.sg-text small { color: var(--ink-3); font-size: 13.5px; }
.sg-go { color: var(--ink-3); font-size: 15px; opacity: 0; transition: opacity .15s ease; }
.sg-item.is-active .sg-go { opacity: 1; }
.sg-none { margin: 0; padding: 12px; color: var(--ink-3); }
.sg-map { display: block; margin-top: 4px; padding: 12px; border-top: 1px dashed var(--paper-rule); border-radius: 0 0 10px 10px; color: var(--ink-2); font-weight: 600; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .sg-panel { animation: none; } }
.hero { overflow: visible; }
.hero-copy { z-index: 5; }
.sg-panel { overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 700px) {
  .sg-panel { top: calc(100% + 8px); padding: 6px; border-radius: 12px; }
  .sg-item { gap: 12px; padding: 9px 8px; }
  .sg-chip { width: 36px; height: 36px; font-size: 19px; }
  .sg-text b { font-size: 16px; }
  .sg-text small { font-size: 13px; }
  .sg-go { display: none; }
  .sg-map { padding: 12px 8px; font-size: 15px; }
  .hero { scroll-margin-top: 0; }
}

/* gallery: the arrows sit in side gutters, so the slides are centred between them instead of under them */
.gallery[data-gallery] { --g-gutter: 60px; padding-inline: var(--g-gutter); }
.gallery[data-gallery] .g-btn { top: 36%; }
.gallery[data-gallery] .g-prev { inset-inline-start: 0; } .gallery[data-gallery] .g-next { inset-inline-end: 0; }
@media (max-width: 860px) { .gallery[data-gallery] { --g-gutter: 46px; } }
@media (max-width: 520px) { .gallery[data-gallery] { --g-gutter: 40px; } .gallery[data-gallery] .g-btn { width: 34px; height: 34px; } }

/* catalog pages: every stamp the same size in equal columns */
.strip.uniform { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; align-items: stretch; justify-content: normal; }
.strip.uniform > .card { width: auto; max-width: none; flex: none; }
.strip.uniform > .card .card-vis { aspect-ratio: 4 / 3; }
.strip.uniform > .card .card-why { display: block; font-size: 13.5px; }
.strip.uniform > .card .card-name { font-size: 19px; }
@media (max-width: 1100px) { .strip.uniform { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .strip.uniform { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } .strip.uniform > .card .card-why { display: none; } }

/* phones: five nav items fit on one row; gallery dots keep a 24px hit area */
@media (max-width: 480px) { .top-nav { gap: 2px 12px; justify-content: space-between; } .top-nav a { font-size: 14px; } }
.g-dots { gap: 14px; }
.g-dots button { position: relative; }
.g-dots button::before { content: ''; position: absolute; inset: -7px; }

/* featured gallery: slides are narrower than the view, so the faded neighbours peek in from both sides */
.gallery[data-gallery] { --g-w: 78%; --g-gap: 28px; overflow-x: clip; }
.gallery[data-gallery] .g-view { overflow: visible; }
.g-slide.strip { width: var(--g-w); justify-self: center; transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .8s ease; }
.gallery[data-gallery] .g-view { cursor: default; }
@media (max-width: 860px) { .gallery[data-gallery] { --g-w: 82%; --g-gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .g-slide.strip { transition: none !important; } }

/* no arrow buttons: the faded neighbours are the controls, so the gutters for the arrows go */
.gallery[data-gallery] { --g-gutter: 0px !important; }
.g-btn { display: none; }

/* ---- header: phones get a menu button; tablets keep one row ---- */
.nav-toggle { display: none; place-items: center; width: 38px; height: 34px; padding: 0; margin-inline-start: 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; }
.nav-bars, .nav-bars::before, .nav-bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.nav-bars { position: relative; }
.nav-bars::before, .nav-bars::after { content: ''; position: absolute; inset-inline-start: 0; }
.nav-bars::before { top: -6px; } .nav-bars::after { top: 6px; }
.top.is-open .nav-bars { background: transparent; }
.top.is-open .nav-bars::before { top: 0; transform: rotate(45deg); }
.top.is-open .nav-bars::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 641px) and (max-width: 860px) {
  .top { flex-wrap: nowrap; row-gap: 0; padding-block: 12px; gap: 14px; }
  .top-nav { order: 0; flex: 0 1 auto; flex-wrap: nowrap; gap: 4px 16px; }
  .top-nav a { font-size: 15px; }
}
@media (max-width: 640px) {
  .nav-toggle { display: grid; }
  .top { flex-wrap: nowrap; row-gap: 0; padding-block: 10px; }
  .top-nav { order: 0; flex: none; }
  .js .top-nav { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; flex-wrap: nowrap; gap: 0; overflow: visible; padding: 4px var(--gutter) 12px; background: var(--page); border-bottom: 1px solid var(--line); box-shadow: 0 14px 24px var(--shadow); }
  .js .top.is-open .top-nav { display: flex; }
  .js .top-nav a { font-size: 17px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .js .top-nav a:last-child { border-bottom: 0; }
  .js .top-nav a[aria-current] { color: var(--hi); font-weight: 800; border-color: var(--line); }
  .js .top-nav a[aria-current]:last-child { border-bottom: 0; }
}

/* ---- album rows (store, city, interest pages): sizes differ only slightly, like the home gallery ---- */
@media (min-width: 761px) {
  .sec .strip:not(.uniform):not(.g-slide) { flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 24px; }
  .sec .strip:not(.uniform):not(.g-slide) > .card { width: auto; max-width: none; min-width: 0; }
  .sec .strip:not(.uniform):not(.g-slide) > .card-s { flex: 0 1 276px; }
  .sec .strip:not(.uniform):not(.g-slide) > .card-m { flex: 0 1 288px; }
  .sec .strip:not(.uniform):not(.g-slide) > .card-l { flex: 0 1 300px; }
  /* same photo height in every card, so tops, photo edges and text start on shared lines; only the width differs a little */
  .sec .strip:not(.uniform):not(.g-slide) > .card .card-vis { aspect-ratio: auto; height: 210px; font-size: 36cqw; }
  .sec .strip:not(.uniform):not(.g-slide) > .card .card-name { font-size: 20px; }
  .sec .strip:not(.uniform):not(.g-slide) > .card .card-why { display: block; font-size: 14px; }
}
@media (max-width: 760px) {
  .sec .strip:not(.uniform):not(.g-slide) { gap: 18px 14px; align-items: stretch; }
  .sec .strip:not(.uniform):not(.g-slide) > .card-s, .sec .strip:not(.uniform):not(.g-slide) > .card-m, .sec .strip:not(.uniform):not(.g-slide) > .card-l { flex: 1 1 calc(50% - 8px); width: auto; }
  .sec .strip:not(.uniform):not(.g-slide) > .card .card-vis { aspect-ratio: 4 / 3; font-size: 36cqw; }
  .sec .strip:not(.uniform):not(.g-slide) > .card .card-why { display: none; }
}

/* home gallery: cards share one line too (equal photo height, near-equal widths) */
@media (min-width: 761px) {
  .gallery[data-gallery] .g-slide.strip { align-items: stretch; }
  .gallery[data-gallery] .g-slide.strip > .card-s { flex-grow: .96; } .gallery[data-gallery] .g-slide.strip > .card-l { flex-grow: 1.04; }
  .gallery[data-gallery] .g-slide.strip > .card .card-vis { aspect-ratio: auto; height: 220px; }
}
@media (max-width: 760px) { .gallery[data-gallery] .g-slide.strip { align-items: stretch; } }

/* the faded neighbours dissolve all the way to the edge: a mask across the width of each peek, not a hard clip */
.gallery[data-gallery] {
  --g-edge: calc((100% - var(--g-w)) / 2);
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .5) calc(var(--g-edge) * .45), #000 var(--g-edge), #000 calc(100% - var(--g-edge)), rgba(0, 0, 0, .5) calc(100% - var(--g-edge) * .45), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .5) calc(var(--g-edge) * .45), #000 var(--g-edge), #000 calc(100% - var(--g-edge)), rgba(0, 0, 0, .5) calc(100% - var(--g-edge) * .45), transparent 100%);
}

/* store page: the glassine strip is not used on this page */
.profile .strip { padding: 10px 0 18px; background: none; border: 0; }
.profile .strip::after, .profile .strip > .card::after { display: none; }


/* selected pin: clearly bigger, white with the shop's series colour, a dark outline (filter on the wrapper, since the stamp mask
   would clip anything drawn on the pin itself), lifted above its neighbours; the other pins step back a little */
.pin { transition: transform .2s var(--ease, ease), opacity .2s; }
.pin.on, :root[data-theme='light'] .pin.on { transform: scale(1.7); background: #fff; color: var(--series, var(--accent)); font-size: 16px; }
.pin-wrap:has(.pin.on) {
  z-index: 10000 !important;
  filter: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink)) drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
}
.leaflet-marker-pane:has(.pin.on) .pin:not(.on) { opacity: .7; }

/* quick links under the search: one row that always drifts slowly (about 35px/s), fading out at both edges.
   Two identical sets side by side; moving by exactly one set loops it seamlessly. Pauses on hover / keyboard focus. */
.quick { display: block; overflow: hidden; margin: 18px 0 0; padding-block: 6px; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.quick-track { display: flex; width: max-content; animation: quick-slide calc(var(--n, 10) * 3.2s) linear infinite; will-change: transform; }
.quick-set { display: flex; flex: none; gap: 8px; padding-inline-end: 8px; }
.quick a { flex: none; white-space: nowrap; }
.quick:hover .quick-track, .quick:focus-within .quick-track { animation-play-state: paused; }
@keyframes quick-slide { to { transform: translateX(-50%); } }
html[dir='rtl'] .quick-track { animation-name: quick-slide-rtl; }
@keyframes quick-slide-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .quick { overflow-x: auto; scrollbar-width: none; }
  .quick-track { animation: none; }
  .quick-set[aria-hidden='true'] { display: none; }
}

/* footer base line: one short centred line */
.foot-base { max-width: none; text-align: center; font-size: 12.5px; letter-spacing: .01em; padding-top: 16px; margin-top: 8px; }

/* footer: brand and tagline at the start, link columns, a "know a shop we missed?" call at the end, and a thin bar with the legal line
   and the small links underneath */
.foot { text-align: start; padding-block: 56px 28px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
.foot-brand { display: block; margin: 0 0 12px; font: 800 30px/1 var(--font-head); color: var(--hi); }
.foot-tag { margin: 0; max-width: 28ch; font: 500 16px/1.5 var(--font-text); color: var(--muted); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 24px 24px; margin: 0; }
.foot-cols div { display: grid; gap: 12px; align-content: start; justify-items: start; }
.foot-cols h2 { margin: 0 0 6px; font: 700 15px var(--font-head); color: var(--hi); }
.foot-cols a { font-size: 16px; color: var(--text-2); }
.foot-cta h2 { margin: 0 0 8px; font: 700 15px var(--font-head); color: var(--hi); }
.foot-cta p { margin: 0 0 18px; max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
.foot-cta .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; text-decoration: none; }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); }
.foot-base { margin: 0; padding: 0; border: 0; max-width: none; text-align: start; font-size: 13px; letter-spacing: 0; color: var(--muted); }
.foot-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-meta a { font-size: 13px; color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; } /* tap target: WCAG 2.2 AA asks 24px */
.foot-meta a:hover, .foot-cols a:hover { color: var(--hi); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 980px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-id { grid-column: 1 / -1; } }
@media (max-width: 620px) { .foot-top { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: 1fr 1fr; } .foot-bar { flex-direction: column; align-items: flex-start; } }

/* featured gallery on phones: one large stamp a slide (gallery.js chunks by 1 at <=760px), neighbours peek in faded */
@media (max-width: 760px) {
  .gallery[data-gallery] { --g-w: 84%; --g-gap: 14px; }
  .gallery[data-gallery] .g-slide.strip { gap: 0; align-items: stretch; }
  .gallery[data-gallery] .g-slide.strip > .card { flex: 1 1 100%; }
  .gallery[data-gallery] .g-slide.strip > .card .card-vis { aspect-ratio: 4 / 3; height: auto; font-size: 40cqw; }
  .gallery[data-gallery] .g-slide.strip > .card .card-name { font-size: 24px; }
  .gallery[data-gallery] .g-slide.strip > .card .card-why { display: block; font-size: 15px; }
  .gallery[data-gallery] .g-slide.strip > .card .card-meta { display: block; }
}

/* category rows on narrow phones: longer labels wrap instead of pushing the shop count out of the row */
@media (max-width: 480px) {
  .series { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; }
  .series-name { font-size: 20px; }
  .series-count { font-size: 13px; white-space: nowrap; }
}

/* The search plate is transformed (hover lift), so it is its own stacking context at z auto; the quick-links strip after it has a
   mask (also a stacking context) and painted over the suggestion panel. Lift the plate above its siblings. */
.search-plate { position: relative; z-index: 3; }
.search-plate.sg-open { z-index: 30; }


/* site map: the broad regions as a row of pills above the city jump links */
.atlas-regions { align-items: center; margin: 18px 0 0; }
.atlas-regions b { margin-inline-end: 6px; color: var(--text-2); }