/* Results in place of the globe (homepage) and on Find Near You, the centre label, the Nonprofits
   pill, the crisis card, Keep, and the hand-drawn map. Prototype look; colors from css/theme.css. */
[hidden] { display: none !important; }
.skip-link { position: absolute; left: 12px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper) !important; border-radius: 12px; }
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; white-space: nowrap; }

/* the centre label: a paper cartouche over the globe, always whole */
#globe-slot .eg-canvas { font-size: clamp(13px, 3.4vw, 17px); }
.eg-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  max-width: min(64%, 300px); padding: .28em .8em .34em; text-align: center; text-wrap: balance;
  font-family: var(--font-head); line-height: 1.05; color: var(--ink);
  background: linear-gradient(180deg, var(--paper-card), rgba(255,250,240,0) 60%), var(--paper-card);
  border: 1.6px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; border-radius: 16px / 40%;
  box-shadow: 0 6px 14px -6px rgba(70,52,20,0.45);
}
.eg-center:empty { display: none; }

/* the Nonprofits pill: quiet outline, under the area cards */
.np-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 6px 0 0 4px; padding: 0 16px; border: 1.4px solid var(--ink-line); border-radius: 999px; background: var(--paper-light); color: var(--ink); font: 600 .9375rem var(--font-sans); text-decoration: none; }
.np-pill:hover { background: var(--paper); }
@media (max-width: 860px) { .np-pill { grid-column: 1 / -1; grid-row: 3; justify-self: center; margin: 4px 0 0; } }

/* ---------------------------------------------------------------- results: the area cards step aside (owner: no icon row)
   The cards and the Nonprofits pill fade and slide out; the results take the whole box. Back brings them in again. */
.home-explore.is-results .mbl-menu, .home-explore.is-results .np-pill { display: none !important; }
.home-explore .mbl-menu { view-transition-name: wwa-areas; }
::view-transition-old(wwa-areas) { animation: wwa-areas-out .25s ease both; }
::view-transition-new(wwa-areas) { animation: wwa-areas-in .25s ease both; }
@keyframes wwa-areas-out { to { opacity: 0; transform: translateX(-28px); } }
@keyframes wwa-areas-in { from { opacity: 0; transform: translateX(-28px); } }
.home-explore.is-results { display: block !important; }
.home-explore.is-results .results-slot { margin-top: 6px; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* ---------------------------------------------------------------- the results: an old atlas's gazetteer */
.near-panel { text-align: left; max-width: 1240px; margin: 0 auto; }
.ink-text { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 600 1rem var(--font-sans); text-decoration: none; cursor: pointer; font-variant: small-caps; letter-spacing: .03em; background-image: var(--pen-line); background-repeat: no-repeat; background-position: 0 calc(100% - 9px); background-size: 0 5px; transition: background-size .25s ease; }
.ink-text:hover, .ink-text:focus-visible { background-size: 100% 5px; }
.np-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.np-back { position: sticky; top: 0; z-index: 4; flex: 1 1 100%; background-color: var(--paper); }
.np-title { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; color: var(--ink); }
.np-title:focus { outline: none; }
.np-count { margin: 0; color: var(--ink-soft); font-style: italic; font-family: var(--font-head); font-size: 1.15rem; }
.np-near { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-near label { font-family: var(--font-head); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); }
.np-near input { flex: 0 1 220px; min-height: 40px; padding: 0 2px; border: 0; border-bottom: 1.5px dotted var(--ink-line); border-radius: 0; background: transparent; color: var(--ink); font: 500 1rem var(--font-sans); }
.np-near input:focus { outline: none; border-bottom-style: solid; }
.np-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 4px 0 8px; font-family: var(--font-head); font-size: 1.1rem; color: var(--ink-soft); }
.np-filters label { display: inline-flex; align-items: center; min-height: 44px; }
.np-filters select { appearance: none; -webkit-appearance: none; min-height: 40px; max-width: 70vw; padding: 0 16px 0 2px; border: 0; border-bottom: 1.5px dotted var(--ink-line); border-radius: 0; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%232c4429' stroke-width='1.3'/></svg>") right 2px center / 9px 6px no-repeat; color: var(--ink); font: italic 400 1.1rem var(--font-head); cursor: pointer; }
.np-ins { gap: 6px; cursor: pointer; }
.np-ins input { width: 18px; height: 18px; accent-color: var(--ink); }
.np-dot { color: var(--ink-faint); padding: 0 2px; }
.np-body { display: grid; grid-template-columns: 1fr; gap: 14px; }
.np-map { display: none; }
.near-panel.map-open .np-map { display: block; order: -1; }
.np-list { list-style: none; margin: 0; padding: 0; }
.np-row { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; padding: 10px 2px 8px; background: var(--pen-line) left bottom / 100% 5px no-repeat; }
.np-row + .np-row { margin-top: 2px; }
.np-row.is-lit .np-main h3 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.np-row.is-lit .np-seal { box-shadow: 0 0 0 3px var(--gold-edge); }
.np-seal { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 3px; border-radius: 50% 46% 52% 48%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--spirit) 70%, var(--paper-light)), var(--spirit) 60%, color-mix(in srgb, var(--spirit) 75%, black)); color: var(--paper); font: 700 .8125rem var(--font-sans); box-shadow: 0 1px 2px rgba(70,52,20,0.40); }
.np-main { min-width: 0; }
.np-main h3 { margin: 0; font: 400 1.25rem/1.2 var(--font-head); color: var(--ink); }
.np-featured { font: italic 400 1rem var(--font-head); color: var(--ink-soft); white-space: nowrap; }
.np-featured span { color: var(--gold); }
.np-meta { margin: 1px 0 0; color: var(--ink-soft); font-size: .9375rem; }
.np-meta em { font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); }
.np-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; }
.np-act { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 600 .9375rem var(--font-sans); font-variant: small-caps; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.np-act span[aria-hidden] { font-variant: normal; font-size: 1.05rem; }
.np-act:hover, .np-act:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.np-act.keep-btn::before { content: "\2727"; font-variant: normal; font-size: 1.05rem; color: var(--spirit); }
.np-act.keep-btn[aria-pressed="true"]::before { content: "\2726"; }
.np-act.keep-btn svg { display: none; }
.np-claim { margin-left: 8px; font-size: .8125rem; color: var(--ink-soft); }
.np-empty { margin: 10px 0; font-family: var(--font-head); font-size: 1.15rem; }
.np-more { margin: 8px 0 0; text-align: center; }
.np-credit { margin: 10px 0 0; font-size: .875rem; color: var(--ink-soft); }
@media (min-width: 900px) {
  .np-maptoggle { display: none !important; }
  .np-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 28px; }
  .np-map, .near-panel.map-open .np-map { display: block; position: sticky; top: 12px; order: 0; }
  .np-row { padding: 6px 2px 6px; }
}
/* the legend under the globe: a small plain-text key */
#globe-slot .eg-legend-item, #globe-slot a.eg-legend-item { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 6px !important; min-height: 0 !important; font-size: .95rem !important; color: var(--ink-soft) !important; }

/* the crisis card: calm, plain, first */
.crisis-card { max-width: 640px; margin: 8px 0 12px; padding: 16px 18px; background: var(--paper-light); border: 2px solid var(--ink); border-radius: 12px; text-align: left; }
.crisis-card h3 { margin: 0 0 6px; font-family: var(--font-head); font-weight: 400; font-size: 1.35rem; }
.crisis-card p { margin: 6px 0; }
.crisis-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* the hand-drawn map */
.treasure-map { max-width: 560px; }
.tmap { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(70,52,20,0.18)); }
.tmap text { font: 600 11px var(--font-sans); fill: var(--ink); }
.tmap .seal-n { fill: var(--paper); font-size:.75rem; }
.tmap .seal { cursor: pointer; }
.tmap .seal.is-lit path, .tmap .seal:hover path, .tmap .seal:focus-visible path { stroke-width: 2.4; }
.tmap.ink-draw .roads path { stroke-dasharray: 400; animation: penDrawMap 1.4s ease forwards; }
@keyframes penDrawMap { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.tmap-note { margin: 4px 0 0; text-align: center; font-size: .875rem; color: var(--ink-soft); }

/* the shared footer */
.atlas-foot { position: relative; margin-top: 40px; background: var(--footer-bg); color: var(--footer-text); text-align: center; }
.atlas-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 20px; background: var(--footer-bg); -webkit-mask: var(--deckle) 0 0 / 1200px 100% repeat-x; mask: var(--deckle) 0 0 / 1200px 100% repeat-x; }
.atlas-foot-in { max-width: 1100px; margin: 0 auto; padding: 28px 20px 24px; }
.atlas-foot a, .atlas-foot p { color: var(--footer-text); }
.atlas-foot-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.atlas-foot-brand img { background: var(--paper); border-radius: 50%; padding: 3px; }
.atlas-foot .atlas-word { color: var(--footer-text); -webkit-text-stroke: .5px var(--footer-text); font-size: 1.8rem; font-family: var(--font-word); }
.atlas-foot-links, .atlas-foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; margin: 10px 0 4px; }
.atlas-foot-links a, .atlas-foot-legal a { display: inline-block; min-height: 44px; padding: 10px; text-decoration: none; }
.atlas-foot-legal a { color: var(--footer-text-soft); }
.atlas-foot .osm-credit, .atlas-foot .owner-link, .atlas-foot .foot-copy { font-size: .9375rem; margin: 6px 0; }
.atlas-foot :focus-visible { outline-color: var(--paper) !important; }

/* Keep (seal button) */
.keep-btn svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .tmap.ink-draw .roads path { animation: none !important; }
}

@media (max-width: 899px) {
  .np-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .np-filters::-webkit-scrollbar { display: none; }
  .np-filters > * { flex: none; }
  .np-filters select { max-width: 70vw; }
  .np-near input { flex: 1 1 140px; }
}

/* ---------------------------------------------------------------- clean inked frames (owner: no "digital error" borders)
   One continuous ink line, a soft radius, a faint printed hairline 3px outside. No wobble filter on boxes. */
.inked-search::before { filter: none !important; inset: 0 !important; border: 1.5px solid rgba(44, 68, 41, .55) !important; border-radius: 18px !important; outline: 1px solid rgba(44, 68, 41, .16); outline-offset: 3px; }
.mbl-group.smart-category::after { filter: none !important; border: 1.5px solid rgba(44, 68, 41, .55) !important; outline: 1px solid rgba(44, 68, 41, .14); outline-offset: 3px; }
.pen-rule { filter: none !important; }
.tmap rect:first-of-type { stroke-opacity: .55; }

/* ---------------------------------------------------------------- results inside the cards + globe box (fixed size) */
#globe-slot .eg-legend, #globe-slot .eg-search-link-below { display: none !important; }


.home-explore.is-results { display: flex !important; flex-direction: column; overflow: hidden; }
.home-explore.is-results .results-slot { flex: 1 1 auto; min-height: 0; display: flex; margin-top: 2px; }
.home-explore.is-results .near-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; }
.home-explore.is-results .np-head, .home-explore.is-results .np-filters, .home-explore.is-results .np-crisis, .home-explore.is-results .np-empty { flex: none; }
.home-explore.is-results .np-body { flex: 1 1 auto; min-height: 0; }
.home-explore.is-results .np-list { overflow-y: auto; min-height: 0; max-height: 100%; padding-right: 6px; scrollbar-width: thin; }
.home-explore.is-results .np-more, .home-explore.is-results .np-credit { flex: none; margin: 4px 0 0; }
.home-explore.is-results .np-credit { display: none; }
.home-explore.is-results .np-back { position: static; flex: none; min-height: 36px; }
.home-explore.is-results .np-title { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
@media (min-width: 900px) {
  .home-explore.is-results .np-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .home-explore.is-results .np-map { position: static; max-height: 100%; overflow: hidden; align-self: start; }
  .home-explore.is-results .np-row { padding: 4px 2px 4px; }
  .home-explore.is-results .np-main h3 { font-size: 1.15rem; }
}
@media (max-width: 899px) {
  .home-explore.is-results .np-body { display: flex; flex-direction: column; }
  .home-explore.is-results .np-list { flex: 1 1 auto; }
  .home-explore.is-results .near-panel.map-open .np-list { display: none; }
  .home-explore.is-results .near-panel.map-open .np-map { flex: 1 1 auto; overflow: auto; }
  .home-explore.is-results .np-near input { flex: 1 1 140px; }
}
/* the proof line belongs to the search card; clear space before the globe block */
.atlas-hero .proof { margin: 8px 0 0; }
.atlas-hero .home-explore { margin-top: 34px; }
#globe-slot .eg-eyebrow:empty { display: none; }
.proof .eg-near .ink-text { min-height: 36px; font-size:1rem; font-variant: normal; letter-spacing: 0; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.proof .eg-near input { min-height: 36px; width: 160px; padding: 0 2px; border: 0; border-bottom: 1.5px dotted var(--ink-line); background: transparent; font: 500 .9375rem var(--font-sans); color: var(--ink); }
#globe-slot .eg-bar-left { pointer-events: auto; }
/* review: gutters on phones, filters wrap, the back link is plain ink */
.np-back { background: none !important; }
.np-filters { flex-wrap: wrap !important; overflow: visible !important; }
@media (max-width: 860px) {
  .home-explore.is-results .results-slot { padding: 0 16px; }
  .np-filters select { max-width: calc(100vw - 48px); }
}

/* ---------------------------------------------------------------- readable entries (owner: the book feel in the layout, not tiny italics) */
.np-main h3 { font: 400 1.1875rem/1.25 var(--font-head) !important; }
.np-meta { font: 400 .9375rem/1.4 var(--font-sans) !important; color: var(--ink-soft) !important; margin: 2px 0 0; }
.np-desc { margin: 3px 0 0; font: 400 .9375rem/1.45 var(--font-sans); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-act { font: 500 .9375rem var(--font-sans) !important; font-variant: normal !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.np-act span[aria-hidden] { color: var(--ink-soft); }
.np-claimline { margin: 0; }
.np-claim { margin: 0; font-size: .8125rem; color: var(--ink-soft); }
.np-row.is-open { background-color: rgba(255, 250, 240, .55); }
.np-details { margin: 6px 0 4px; padding: 8px 0 2px; border-top: 1px dotted var(--ink-faint); }
.np-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 6px; font-size: .9375rem; }
.np-dl dt { font-family: var(--font-head); font-style: italic; color: var(--ink-soft); }
.np-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
p.np-dl { display: block; }
@media (max-width: 899px) { .np-main h3 { font-size: 1.125rem !important; } .np-act { min-height: 44px; } }
/* the street map: parchment, a soft burnt edge, ink controls, wax seals */
.np-realmap { position: relative; width: 100%; height: 100%; min-height: 300px; border: 1.5px solid rgba(44, 68, 41, .55); border-radius: 10px; overflow: hidden; outline: 1px solid rgba(44, 68, 41, .14); outline-offset: 3px; }
.np-realmap::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(70,52,20,0.28); z-index: 2; }
.near-panel .np-map { min-height: 300px; }
.home-explore.is-results .np-map { height: 100%; }
.home-explore.is-results .np-realmap { min-height: 0; }
.np-mseal-at { line-height: 0; }
.np-mseal-at:has(.is-lit) { z-index: 5; }
.np-mseal { position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50% 46% 52% 48%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--spirit) 70%, var(--paper-light)), var(--spirit) 60%, color-mix(in srgb, var(--spirit) 75%, black)); color: var(--paper); font: 700 .8125rem var(--font-sans); box-shadow: 0 2px 3px rgba(70,52,20,0.45); cursor: pointer; }
.np-mseal.is-lit { box-shadow: 0 0 0 3px var(--gold-edge), 0 2px 3px rgba(70,52,20,0.45); scale: 1.18; transform-origin: 50% 100%; }
.np-realmap .maplibregl-ctrl-group { background: var(--paper-light); border: 1.4px solid var(--ink-line); box-shadow: none; }
.np-realmap .maplibregl-ctrl-group button { width: 32px; height: 32px; }
.np-realmap .maplibregl-ctrl-attrib { background: rgba(244, 236, 214, .85); font-size:.75rem; }
.np-realmap .maplibregl-ctrl-attrib a { color: var(--ink); }
.home-explore.is-results .tmap { height: 100%; width: 100%; }
.home-explore.is-results .tmap-note { display: none; }

/* ---------------------------------------------------------------- fields you can see to write in (owner) */
.inked-search .f { cursor: text; }
.inked-search input { border-bottom: 1.5px solid rgba(44, 68, 41, .35) !important; caret-color: var(--ink); padding-bottom: 4px !important; }
.inked-search input:hover { border-bottom-color: rgba(44, 68, 41, .6) !important; }
.inked-search input:focus { border-bottom-color: var(--ink) !important; border-bottom-width: 2px !important; outline: none; }
.inked-search .f:focus-within { background: rgba(234, 220, 184, .45); border-radius: 12px; }
.inked-search input::placeholder, .np-near input::placeholder, .proof .eg-near input::placeholder { color: var(--placeholder-hint); font-style: italic; opacity: 1; }
.np-near input { border-bottom: 1.5px solid rgba(44, 68, 41, .35) !important; caret-color: var(--ink); }
.np-near input:focus { border-bottom: 2px solid var(--ink) !important; background: rgba(234, 220, 184, .35); }

.atlas-brand { min-height: 44px; }
.np-filters select { min-height: 44px; }
/* the claim link: once. On the action line when the entry is closed, inside Details when it is open */
.np-acts .np-claim { margin-left: 6px; }
.np-row.is-open .np-acts .np-claim { display: none; }
.np-details .np-claimline { margin: 4px 0 0; }
/* phones: the actions on one line (no dots, tighter gaps; the website is one tap away in Details) */
@media (max-width: 480px) {
  .np-acts { gap: 0 14px; }
  .np-acts .np-dot { display: none; }
  .np-act { padding: 0; }
  .np-acts .np-web { display: none; }
  .np-acts .np-claim { margin-left: 0; }
  .np-row { gap: 0 10px; }
}
@media (max-width: 380px) { .np-acts { gap: 0 8px; } .np-act { gap: 3px; } }
/* the globe: its centre tag is the only visible title, no instruction line (owner). The heading stays for screen readers */
#globe-slot .eg-bar { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
/* "⌖ Use my location · 154,000+ places …": one line under the search card on desktop */
.proof.has-near { flex-wrap: wrap; justify-content: center; column-gap: 8px; row-gap: 0; font-size: 1rem; }
.proof .eg-near { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; color: var(--ink); }
.proof .eg-near .ink-text { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink); cursor: pointer; font: 500 1rem var(--font-sans) !important; }
.proof .eg-near input { min-height: 40px; }
.proof .eg-near-msg { flex-basis: 100%; font-style: italic; color: var(--ink); }
.proof .eg-near-sep { color: var(--ink-faint); }
@media (max-width: 640px) {
  /* phone: the location directly under the card, the count on the line below */
  .proof.has-near { flex-direction: column; gap: 0; }
  .proof.has-near .eg-near-sep { display: none; }
}
/* the filters: plain upright type, easy to read (owner: no italic serif in the lists) */
.np-filters, .np-filters .np-showing, .np-filters .np-ins { font: 500 1rem var(--font-sans) !important; font-style: normal !important; color: var(--ink) !important; }
.np-filters select { font: 500 1rem var(--font-sans) !important; font-style: normal !important; color: var(--ink) !important; border-bottom: 1.5px solid var(--ink-line) !important; padding-right: 22px !important; }
.np-filters select option { font: 500 1rem var(--font-sans); font-style: normal; color: var(--ink); background: var(--paper-light); }
/* online visits: a small mark beside the type; no seal, no distance */
.np-online { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border: 1px solid var(--ink-line); border-radius: 999px; font: 600 .8125rem var(--font-sans); color: var(--ink); }
.np-alsoonline { font-size: .875rem; color: var(--ink-soft); }
.np-mapnote { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 220px; margin: 0; padding: 20px; border: 1.5px solid rgba(44, 68, 41, .35); border-radius: 12px; background: var(--paper-light); font: italic 400 1.125rem var(--font-head); color: var(--ink-soft); text-align: center; }
/* the entry that matches the seal under the pointer (and the reverse): a soft paper glow and an ink bar */
.np-row { transition: background-color .15s ease, box-shadow .15s ease; }
.np-row.is-lit { background-color: var(--paper-light); box-shadow: inset 3px 0 0 var(--ink), 0 0 16px -6px rgba(70,52,20,0.35); border-radius: 4px; }
.tmap .seal.is-lit { scale: 1.15; transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .np-row { transition: none; } }
/* each seal on the street map has a 44px tap area */
.np-mseal::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
/* first-visit demo: the area being shown, and the hint beside the label the hand points at */
.mbl-group.mbl-demo-on { box-shadow: 0 0 0 2px var(--ink), 0 14px 30px -14px rgba(70,52,20,0.45) !important; transition: box-shadow .25s ease; }
.gl-hint { position: absolute; z-index: 30; transform: translateX(-50%); padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-light); color: var(--ink); font: italic 400 1.05rem var(--font-head); white-space: nowrap; pointer-events: none; box-shadow: 0 6px 14px -8px rgba(70,52,20,0.45); }
#globe-slot .gl-demo-pick { animation: gl-pick-pulse 1.1s ease-in-out infinite; }
@keyframes gl-pick-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--ink), 0 6px 16px -6px rgba(70,52,20,0.45); } 50% { box-shadow: 0 0 0 4px var(--gold-edge), 0 10px 24px -6px rgba(70,52,20,0.45); } }

/* a place known only by its zip code: a hollow ring in the seal's red ("in this area"), never a solid seal */
.np-mseal.is-area { background: rgba(250, 244, 228, .92); color: var(--spirit); box-shadow: inset 0 0 0 2.5px var(--spirit), 0 2px 3px rgba(70,52,20,0.35); border-radius: 50%; }
.np-mseal.is-area.is-lit { box-shadow: inset 0 0 0 2.5px var(--spirit), 0 0 0 3px var(--gold-edge), 0 2px 3px rgba(70,52,20,0.35); }
.tmap .seal.is-area path, .tmap .seal.is-area circle:not(.hit) { fill: var(--paper-light); stroke: var(--spirit); stroke-width: 1.6; stroke-dasharray: 2.4 1.6; }
.tmap .seal.is-area .seal-n { fill: var(--spirit); }
/* nothing found: what it could have meant, and the searches people make most */
.np-sugline { display: block; margin-top: 8px; font-family: var(--font-sans); font-size: 1rem; }
.np-sug { font-size: 1rem; min-height: 32px; font-variant: normal; text-transform: none; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; }

/* a moved map: the way back to the searched place */
.np-backpill { position: absolute; z-index: 3; left: 50%; top: 10px; transform: translateX(-50%); min-height: 36px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-light); color: var(--ink); font: 600 .9rem var(--font-sans); cursor: pointer; box-shadow: 0 6px 14px -8px rgba(70,52,20,0.45); white-space: nowrap; }
.np-backpill:hover, .np-backpill:focus-visible { background: var(--ink); color: var(--paper); }
/* Find Near You page (and any full-page results): the map is as tall as the screen and stays beside the
   list while it scrolls (owner: "why map smaller and list longer") */
@media (min-width: 900px) {
  .near-panel:not(.home-explore .near-panel) .np-map { position: sticky; top: 16px; height: calc(100vh - 32px); min-height: 420px; max-height: 900px; }
  .near-panel:not(.home-explore .near-panel) .np-map .np-realmap { height: 100%; min-height: 0; }
  .near-panel:not(.home-explore .near-panel) .np-map .tmap { height: 100%; }
}

/* ---------------------------------------------------------------- Featured: golden and unique (owner)
   A gilded card: warm gold paper, a double gold frame with corner stars, a framed portrait with the
   number seal on its corner, a gold wax-seal badge, a larger name, and an ink-and-gold "See profile". */
.np-row.is-featured {
  position: relative; margin: 8px 0 16px; padding: 16px 16px 14px 14px; gap: 0 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--feat-paper-a), var(--feat-paper-b) 55%, var(--feat-paper-c)),
    var(--feat-paper-b);
  border: 1.5px solid var(--feat-line); border-radius: 10px;
  box-shadow: inset 0 0 0 4px var(--feat-cream-a), inset 0 0 0 5.5px var(--feat-line-a), 0 12px 26px -16px var(--feat-shadow), 0 0 0 3px var(--feat-halo);
}
.np-row.is-featured::before, .np-row.is-featured::after { content: "✦"; position: absolute; color: var(--feat-line); font-size: .8rem; line-height: 1; pointer-events: none; }
.np-row.is-featured::before { top: 7px; right: 9px; }
.np-row.is-featured::after { bottom: 7px; right: 9px; }
.np-row.is-featured .np-main h3 { font-size: 1.4rem !important; color: var(--feat-text); }
.np-row.is-featured .np-main h3 a { color: inherit; }
.np-row.is-featured .np-meta { color: var(--feat-meta); }
.np-row.is-featured .np-desc { color: var(--feat-desc); }
/* the badge: a small gold wax seal */
.np-row.is-featured .np-featured {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 10px 2px 8px; vertical-align: 3px;
  border-radius: 999px 999px 999px 4px; font: 600 .78rem/1.6 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; font-style: normal;
  color: var(--feat-text); background: radial-gradient(circle at 30% 30%, var(--feat-seal-a), var(--feat-seal-b) 55%, var(--feat-line));
  box-shadow: 0 1px 2px var(--feat-drop), inset 0 -1px 0 var(--feat-drop);
}
.np-row.is-featured .np-featured span { color: var(--feat-star); }
/* the portrait: mounted in a gold frame, the number seal on its corner */
.np-portrait { position: relative; display: block; width: 72px; height: 72px; margin-top: 2px; }
.np-portrait img { display: block; width: 72px; height: 72px; object-fit: cover; object-position: 50% 18%; /* faces sit near the top of a portrait photo */ border-radius: 6px; border: 3px solid var(--feat-cream); outline: 1.5px solid var(--feat-line); box-shadow: 0 6px 12px -6px var(--feat-drop-b); background: var(--feat-paper-b); }
.np-portrait .np-seal { position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; margin: 0; font-size: .75rem; color: var(--feat-text);
  background: radial-gradient(circle at 35% 30%, var(--feat-seal-a), var(--feat-seal-b) 55%, var(--feat-seal-c)); box-shadow: 0 0 0 2px var(--feat-cream), 0 2px 3px var(--feat-drop-b); }
/* the main action: ink with gold letters */
.np-row.is-featured .np-profile { padding: 4px 12px; margin-right: 4px; border-radius: 5px; background: var(--feat-btn); color: var(--feat-btn-text) !important; font-weight: 600; box-shadow: 0 2px 0 var(--feat-btn-dark); text-decoration: none; }
.np-row.is-featured .np-profile:hover, .np-row.is-featured .np-profile:focus-visible { background: var(--feat-btn-dark); color: var(--feat-btn-hover) !important; }
.np-row.is-featured.is-lit { box-shadow: inset 0 0 0 4px var(--feat-cream-a), inset 0 0 0 5.5px var(--feat-line-b), 0 0 0 4px var(--feat-halo-b), 0 14px 28px -14px var(--feat-shadow); }
/* their seal on the map: gold */
.np-mseal.is-featured { color: var(--feat-text); background: radial-gradient(circle at 35% 30%, var(--feat-seal-a), var(--feat-seal-b) 55%, var(--feat-seal-c)); box-shadow: 0 0 0 2.5px var(--feat-cream), 0 0 0 4px var(--feat-line), 0 2px 4px var(--feat-drop-b); z-index: 3; }
@media (max-width: 480px) {
  .np-row.is-featured { padding: 14px 12px 12px 10px; gap: 0 12px; }
  .np-portrait, .np-portrait img { width: 58px; height: 58px; }
  .np-row.is-featured .np-main h3 { font-size: 1.25rem !important; }
}
/* the Featured showcase: one golden card in every search (owner), marked as a showcase */
.np-spot { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; list-style: none; margin: 10px 0 16px; padding: 14px 16px 12px 14px;
  background: radial-gradient(120% 140% at 0% 0%, var(--feat-paper-a), var(--feat-paper-b) 55%, var(--feat-paper-c)); border: 1.5px dashed var(--feat-line); border-radius: 10px;
  box-shadow: inset 0 0 0 4px var(--feat-cream-a), 0 10px 22px -16px var(--feat-shadow); }
.np-spot .np-spot-tag { margin: 0 0 2px; font: 600 .74rem/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--feat-star); }
.np-spot h3 { margin: 0; font: 400 1.3rem/1.2 var(--font-head); color: var(--feat-text); }
.np-spot h3 a { color: inherit; text-decoration: none; }
.np-spot h3 a:hover { text-decoration: underline; }
.np-spot .np-meta { color: var(--feat-meta); }
.np-spot .np-desc { color: var(--feat-desc); }
.np-spot .np-profile { padding: 4px 12px; margin-right: 10px; border-radius: 5px; background: var(--feat-btn); color: var(--feat-btn-text) !important; font-weight: 600; text-decoration: none; }
.np-spot .np-spot-own { font-size: .9rem; color: var(--feat-meta); }
.np-spot .np-spot-own a { color: var(--feat-text); }
@media (max-width: 480px) { .np-spot { padding: 12px 10px; gap: 0 12px; } .np-spot .np-portrait, .np-spot .np-portrait img { width: 58px; height: 58px; } }