/* ============================================================
   DialShare — poster-direction additions
   Loaded after style.css in base.html. Every rule here either adds a new
   class or overrides an existing one at equal specificity, so load order
   does the work and style.css is never duplicated here. The --content-max
   fix (block 1 of the original port/dialshare-home.css) was applied
   directly to .card-section in style.css instead of here.
   ============================================================ */


/* ---- Hero: full-width copy over decorative colour blocks --

   v2 homepage hero. Copy runs full width instead of splitting into a
   two-column grid; three oversized pastel shapes sit behind it as a static
   stand-in for the design's scroll-linked parallax layers (no JS motion
   here — the shapes are simply decorative and clipped to the band).
   ------------------------------------------------------------ */
.hero-parallax { position: relative; overflow: hidden; }

.hero-parallax__blocks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-parallax__block {
  position: absolute;
  display: block;
}

.hero-parallax__block--blush {
  right: -6%;
  top: 4%;
  width: min(46vw, 620px);
  aspect-ratio: 1 / 1.25;
  background: var(--blush-200);
}

.hero-parallax__block--butter {
  right: 14%;
  bottom: -10%;
  width: min(28vw, 340px);
  aspect-ratio: 1 / 1;
  background: var(--butter-200);
}

.hero-parallax__block--mint {
  left: -8%;
  bottom: -14%;
  width: min(34vw, 420px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--mint-200);
}

.hero-parallax__content { position: relative; z-index: 2; }

.hero-parallax__copy {
  max-width: 1080px;
  padding: clamp(32px, 7vh, 80px) 0 clamp(48px, 9vh, 120px);
}

/* The homepage headline is the one place the MEGA scale is used —
   clamp(3.6rem, 9vw, 8.5rem) at 0.84 line-height, not the hero scale. */
.hero-parallax__copy h1 {
  font-size: var(--type-mega-size);
  line-height: var(--type-mega-line);
  margin-bottom: var(--space-5);
}

.hero-parallax__copy h1 .accent { color: var(--vermillion-500); }

.hero-parallax__lead { max-width: 36ch; margin: 0 0 var(--space-6); }

@media (max-width: 767.98px) {
  .hero-parallax__block--blush,
  .hero-parallax__block--butter,
  .hero-parallax__block--mint,
  .hero-parallax__block--sky { opacity: 0.5; }
}


/* ---- Roasts hero: search + CTA row, drifting note cloud -----

   Same static hero-parallax treatment as the homepage, on a blush field.
   The note cloud is decorative only (no scroll linkage, same as the rest
   of this file) and hides once it would start overlapping the copy.
   ------------------------------------------------------------ */
.hero-parallax__row {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: flex-end;
}

.hero-parallax__search { flex: 0 1 320px; min-width: 220px; }

.hero-note-cloud {
  position: absolute;
  right: 0;
  top: 18%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  pointer-events: none;
}

.hero-note-cloud__item {
  background: var(--paper-white);
  border: var(--rule-bold) solid var(--ink);
  border-radius: 999px;
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-note-cloud__item:nth-child(odd) { transform: rotate(-2deg); margin-right: clamp(12px, 4vw, 60px); }
.hero-note-cloud__item:nth-child(even) { transform: rotate(2deg); margin-right: clamp(40px, 9vw, 160px); }

@media (max-width: 991.98px) {
  .hero-note-cloud { display: none; }
}


/* ---- Roasters hero: real scroll-linked parallax --------------

   Unlike the home/roasts heroes above (a static stand-in, no JS motion),
   this page's whole point is the roaster names, so it gets the same genuine
   scroll-linked drift as the cafe pages (see cafe-detail-map.js) instead —
   roasters-hero.js writes the translate3d per layer on scroll. Grid lines,
   colour blocks, the copy column and the name drift each move at their own
   rate; this file only lays out the layers and opts them out under
   reduced-motion.
   ------------------------------------------------------------ */
.hero-parallax__block--sky {
  left: -10%;
  bottom: -20%;
  width: min(32vw, 400px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--sky-200);
}

.hero-grid-lines {
  position: absolute;
  inset: -8% -2% -2%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background-image:
    repeating-linear-gradient(to bottom, rgba(58, 22, 32, 0.1) 0 1px, transparent 1px 14.28%),
    repeating-linear-gradient(to right, rgba(58, 22, 32, 0.1) 0 1px, transparent 1px 12.5%);
}

.hero-name-drift {
  position: absolute;
  right: 0;
  top: 18%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
}

.hero-name-drift__item {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: var(--type-display-tracking);
  color: var(--ink);
}

.hero-name-drift__item:nth-child(3n+1) { padding-right: clamp(16px, 4vw, 60px); }
.hero-name-drift__item:nth-child(3n+2) { padding-right: clamp(16px, 9vw, 130px); }
.hero-name-drift__item:nth-child(3n+3) { padding-right: clamp(16px, 14vw, 200px); }

.hero-parallax--roasters .hero-parallax__copy,
.hero-parallax--roasters .hero-parallax__blocks { will-change: transform; }

@media (max-width: 991.98px) {
  .hero-name-drift { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grid-lines,
  .hero-name-drift,
  .hero-parallax--roasters .hero-parallax__blocks,
  .hero-parallax--roasters .hero-parallax__copy { transform: none !important; }
}


/* ---- Four-pillar grid --------------------------------------

   Ink-bordered 4-up grid of numbered link cards, each cell on paper —
   the 1.5px gap between cells reads as ink rule since the grid container
   itself is ink.
   ------------------------------------------------------------ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5px;
  background: var(--ink);
  border: var(--rule-bold) solid var(--ink);
}

.pillar-grid__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-5);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.pillar-grid__index {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--vermillion-600);
}

.pillar-grid__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.pillar-grid__body { font-size: 0.95rem; line-height: 1.4; }

.pillar-grid__open {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermillion-600);
}

.pillar-grid__item:hover .pillar-grid__title { color: var(--vermillion-600); }


/* ---- Dial-in-faster comparison block -------------------------- */
.home-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--rule-bold) solid var(--ink);
}

.home-compare__col { padding: var(--space-5); background: var(--paper-white); }

.home-compare__col--accent { background: var(--mint-200); border-left: var(--rule-bold) solid var(--ink); }

.home-compare__heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-quiet);
  margin: 0 0 var(--space-4);
}

.home-compare__heading--accent { color: var(--ink); }

.home-compare__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid rgba(58, 22, 32, 0.16);
}

.home-compare__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.home-compare__value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1.05;
  color: var(--ink);
}

.home-compare__value--accent { color: var(--vermillion-600); }

@media (max-width: 575.98px) {
  .home-compare { grid-template-columns: 1fr; }
  .home-compare__col--accent { border-left: none; border-top: var(--rule-bold) solid var(--ink); }
}


/* ---- Homepage blog list item ------------------------------------ */
.home-blog-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding-top: var(--space-4);
  border-top: var(--rule-bold) solid var(--ink);
  color: var(--ink);
  text-decoration: none;
}

.home-blog-item__meta {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.home-blog-item__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.home-blog-item__excerpt { font-size: 0.95rem; line-height: 1.45; }

.home-blog-item:hover .home-blog-item__title { color: var(--vermillion-600); }


/* ---- Pull-quote band -------------------------------------

   The one place Instrument Serif italic appears on the homepage, and the
   only vermillion band on the page.
   ------------------------------------------------------------ */
.pull-quote-band {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

/* Stat tiles on a saturated band: the value goes paper, and the label has
   to go light too — at --text-quiet it drops to ~1.4:1 and disappears. */
.card-section--vermillion .stat-tile__value,
.card-section--plum .stat-tile__value,
.card-section--dark .stat-tile__value { color: var(--paper-white); }

.card-section--vermillion .stat-tile__label,
.card-section--plum .stat-tile__label,
.card-section--dark .stat-tile__label { color: rgba(253, 246, 232, 0.78); }

.card-section--vermillion .stats-strip .stat-tile,
.card-section--plum .stats-strip .stat-tile,
.card-section--dark .stats-strip .stat-tile {
  border-left-color: rgba(253, 246, 232, 0.35);
}

@media (max-width: 767.98px) {
  .pull-quote-band { grid-template-columns: 1fr; gap: var(--space-6); }
}


/* ---- Feature split proportions ---------------------------

   The design stacks the four capability rows in ONE full-width column
   (0.8fr intro / 1.6fr list), not a 2x2 grid — the numbering 01–04 reads
   as a sequence, which a 2x2 breaks.
   ------------------------------------------------------------ */
.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: var(--space-8);
}

.feature-split__grid {
  display: block;
  flex: none;
}

.feature-link {
  gap: var(--space-5);
  padding: var(--space-5) 0;
}

.feature-link__label { font-size: clamp(1.4rem, 2.2vw, 2rem); }

/* The arrow travels straight right in the current design, not up-right. */
.feature-link:hover .feature-link__arrow { transform: translateX(6px); }

@media (max-width: 991.98px) {
  .feature-split { grid-template-columns: 1fr; gap: var(--space-6); }
}


/* ---- Small classes several rebuilt pages need --------------- */

/* Eyebrow + title on the left, action on the right, over the 1.5px rule
   that opens every content band. */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: var(--rule-bold) solid var(--ink);
  margin-bottom: var(--space-6);
}

/* Flush variant: drop the rule and spacing below, for a section-head that
   sits directly above other content with no divider (e.g. list-page
   sub-headers immediately followed by a filter row or grid). */
.section-head--flush {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* Roaster strip: names set in Anton, location and rating in mono beneath —
   overrides the older logo+name flex-row treatment in style.css. */
.roaster-strip {
  gap: var(--space-5) var(--space-7);
  border-top-width: var(--rule-bold);
  border-top-color: var(--ink);
}

.roaster-strip__item {
  display: block;
  gap: 0;
  color: var(--ink);
  font-weight: 400;
  font-size: 1rem;
}

.roaster-strip__name {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 0.95;
  letter-spacing: var(--type-display-tracking);
  transition: color var(--duration-fast) var(--ease-out);
}

.roaster-strip__item:hover .roaster-strip__name { color: var(--vermillion-600); }

.roaster-strip__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.roaster-strip__all {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Diagram sizing helpers — the component is fluid, so its container caps it. */
.feature-split__diagram { width: 132px; margin-top: var(--space-6); }
.cta-banner__diagram { width: 96px; }

/* Sign-up band: headline left, list + CTA right. */
.cta-banner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: end;
}

.cta-banner__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 420px;
}

/* Numbered benefit list — two columns (index, text) rather than the
   spec panel's default four. */
.cta-banner__list {
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
}

.cta-banner__list > dt {
  grid-row: auto;
  padding-right: var(--space-4);
  color: var(--vermillion-600);
}

.cta-banner__list > dd { text-transform: none; font-weight: 600; }

@media (max-width: 991.98px) {
  .cta-banner__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Underlined field — shared search/filter input treatment for pages
   rebuilt against a jsx reference showing it (Cafes, Roasts, Blog search). */
.field__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-quiet);
}

.field__input {
  width: 100%;
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.field__input:focus { border-bottom-color: var(--vermillion-500); }

select.field__input { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; }

/* Result-count bar above a grid. */
.results-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: var(--rule-bold) solid var(--ink);
}

.results-bar__count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
}

/* Blog feature band. */
.blog-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.blog-feature__sticker { display: flex; justify-content: center; }

.blog-feature__date {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

/* Post detail. */
.back-link {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.post-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

.post-hero-image {
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.post-hero-image > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-hero-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-6);
  background: var(--sky-200);
  text-align: center;
}

.post-hero-image--placeholder .mega {
  color: rgba(58, 22, 32, 0.18);
  font-size: clamp(2rem, 6vw, 5rem);
}

/* Ink pull quote — same face as the vermillion band version. */
.pull-quote--ink { color: var(--ink); max-width: 34ch; margin-bottom: var(--space-6); }

.blog-post-foot {
  max-width: 720px;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--rule-bold) solid var(--ink);
}

@media (max-width: 991.98px) {
  .blog-feature { grid-template-columns: 1fr; gap: var(--space-6); }
}


/* ---- Saved-items filter chips (Account page) ------------------- */
.chip-filter {
  background: transparent;
  color: var(--ink);
  border: var(--rule-bold) solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.chip-filter.is-active { background: var(--ink); color: var(--paper); }


/* ---- Cafes: sticky parallax map stage --------------------------

   The fold is a real Leaflet map (Natural Earth geometry via basemap.js,
   no tile server or API key) held in a sticky viewport while a taller
   wrapper scrolls past it — the map, the ghosted "CAFES" display type, the
   search panel and the sticker each drift at a different rate. JS
   (cafe-landing.js) writes the translate3d/opacity per frame; this file
   only lays out the stack.
   ------------------------------------------------------------ */
.stage { position: relative; height: 200vh; z-index: 1; }

.stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  border-top: var(--rule-bold) solid var(--ink);
  border-bottom: var(--rule-bold) solid var(--ink);
  background: var(--paper);
}

.stage__map { position: absolute; inset: -8% -4% -4%; will-change: transform; }

.cafe-map { position: absolute; inset: 0; background: var(--paper); }

.stage__ghost {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2vh;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.stage__ghost .mega { font-size: clamp(6rem, 22vw, 20rem); line-height: 0.8; color: rgba(58, 22, 32, 0.14); }

.stage__panel {
  position: absolute;
  top: 50%;
  left: clamp(16px, 5vw, 72px);
  margin-top: -16px;
  transform-origin: top left;
  z-index: 3;
  translate: 0 -50%;
}

.panel {
  width: min(520px, 86vw);
  background: var(--paper);
  border: var(--rule-bold) solid var(--ink);
  padding: clamp(24px, 3vw, 38px);
}

.stage__sticker { position: absolute; right: clamp(16px, 4vw, 48px); top: 34px; z-index: 3; pointer-events: none; }

.stage__card { position: absolute; right: clamp(16px, 4vw, 48px); bottom: 56px; z-index: 4; }

.pin-card {
  position: relative;
  width: min(320px, 82vw);
  background: var(--paper-white);
  border: var(--rule-bold) solid var(--ink);
  padding: 20px;
}

.pin-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.7rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 6px 0 12px;
  color: var(--ink);
}

.pin-card__x {
  position: absolute;
  right: 8px;
  top: 6px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.stage__hint {
  position: absolute;
  left: clamp(16px, 5vw, 72px);
  bottom: 18px;
  z-index: 3;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  padding: 4px 8px;
  border: 1px solid rgba(58, 22, 32, 0.16);
}

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-quiet);
  margin-bottom: 8px;
}

.field-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  outline: none;
}

.field-input:focus { border-bottom-color: var(--vermillion-500); }

.micro {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

@media (max-width: 820px) {
  .stage { height: 170vh; }
  .stage__card { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__map, .stage__ghost, .stage__panel, .stage__sticker { transform: none !important; }
}


/* ---- Cafe detail: parallax hero + address map -------------------- */
.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}

.detail-head > div { will-change: transform; }

.detail-map-wrap { position: relative; }

.addr-map {
  position: relative;
  height: min(52vh, 460px);
  border: var(--rule-bold) solid var(--ink);
  background: var(--sky-200);
}

.addr-map--empty { display: flex; align-items: center; justify-content: center; background: var(--sky-200); }
.addr-map--empty .mega { font-size: clamp(2rem, 4vw, 3.2rem); color: rgba(58, 22, 32, 0.18); }

.detail-sticker { position: absolute; right: 14px; top: 14px; pointer-events: none; z-index: 600; }

.ghost-name {
  position: absolute;
  left: 0;
  right: 0;
  top: 2%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.ghost-name .mega { font-size: clamp(5rem, 17vw, 15rem); line-height: 0.8; color: rgba(58, 22, 32, 0.065); }

@media (max-width: 900px) {
  .detail-head { grid-template-columns: 1fr; }
  .detail-sticker { right: 8px; top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-head > div, .ghost-name { transform: none !important; }
}


/* ---- Leaflet chrome, restyled to the poster palette --------------- */
.leaflet-container { font-family: var(--font-mono); background: var(--sky-200); }

.leaflet-control-attribution {
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  border-radius: 0;
  color: var(--ink);
}

.leaflet-control-attribution a { color: var(--vermillion-600); }

.leaflet-bar, .leaflet-bar a { border-radius: 0; border-color: var(--ink); color: var(--ink); background: var(--paper); }
.leaflet-bar a:hover { background: var(--butter-100); color: var(--vermillion-600); }

.cafe-pin i {
  display: block;
  width: 14px;
  height: 14px;
  margin: 2px;
  border-radius: 50%;
  background: var(--vermillion-500);
  border: var(--rule-bold) solid var(--ink);
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), background 140ms;
}

.cafe-pin b {
  position: absolute;
  left: 24px;
  top: -1px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(58, 22, 32, 0.16);
  padding: 2px 6px;
  opacity: 0;
  transition: opacity 140ms;
}

.cafe-pin:hover i, .cafe-pin.is-active i { transform: scale(1.5); background: var(--ink); }
.cafe-pin:hover b, .cafe-pin.is-active b { opacity: 1; }