/* SFF 2026 - Venue Map. Scoped to .sff26-vmap; rules are written as ".sff26-vmap .sff26-vmap__x" so they outrank the
   theme's element rules. Heading pattern and spacing as the other v2 sections. The places on the map are buttons laid
   over the image (positioned in % of it); lit = an amber ring with the place's name above it. Venue cards carry the
   block's colour on their pill. The only !important is phone typography (see the phone block). */
.sff26-vmap {
  --sff26-amber: #FCB316;
  --sff26-muted: #cfcfcf;
  --sff26-line: rgba(255, 255, 252, .14);
  --sff26-s1: #1e1d1d;
  --sff26-ease: cubic-bezier(.22, .8, .24, 1);
  --sff26-gut: 20px;
  --sff26-max: var(--forum-content-max, 1416px);
  box-sizing: border-box;
  position: relative;
  padding: 120px 0 0;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
}
@media (min-width: 768px) { .sff26-vmap { --sff26-gut: var(--forum-gutter, 40px); } }
.sff26-vmap *,
.sff26-vmap *::before,
.sff26-vmap *::after { box-sizing: border-box; }
.sff26-vmap.sff26-vmap--space-small { padding-top: 64px; }
.sff26-vmap.sff26-vmap--space-none { padding-top: 0; }
/* the theme styles every button (capitals, spacing): reset inside the section */
.sff26-vmap button { font-family: inherit; letter-spacing: normal; text-transform: none; }
.sff26-vmap .sff26-vmap__w { max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut)); margin: 0 auto; padding: 0 var(--sff26-gut); }

/* heading, the venue line, the text */
.sff26-vmap .sff26-vmap__hd { max-width: 860px; margin: 0 0 40px; }
.sff26-vmap .sff26-vmap__h2 { margin: 0; padding: 0; font-family: inherit; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.1; font-weight: 600; letter-spacing: -.018em; color: #fff; text-transform: none; text-wrap: balance; }
.sff26-vmap .sff26-vmap__sub { margin: 14px 0 0; padding: 0; font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--sff26-amber); }
.sff26-vmap .sff26-vmap__intro { margin: 16px 0 0; font-size: 18px; line-height: 1.6; color: var(--sff26-muted); }
.sff26-vmap .sff26-vmap__intro p { margin: 0 0 12px; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.sff26-vmap .sff26-vmap__intro p:last-child { margin-bottom: 0; }
.sff26-vmap .sff26-vmap__intro a { color: var(--sff26-amber); }

/* the map: the image, with the places laid over it */
.sff26-vmap .sff26-vmap__frame { position: relative; margin: 0 0 48px; }
.sff26-vmap .sff26-vmap__scroll { overflow: hidden; border-radius: 16px; background: #0d0f14; }
.sff26-vmap .sff26-vmap__map { position: relative; width: 100%; }
.sff26-vmap .sff26-vmap__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.sff26-vmap .sff26-vmap__spot {
  position: absolute;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.sff26-vmap .sff26-vmap__spot:focus { outline: none; }
.sff26-vmap .sff26-vmap__spot:hover,
.sff26-vmap .sff26-vmap__spot:focus-visible,
.sff26-vmap .sff26-vmap__spot.is-on { z-index: 3; box-shadow: 0 0 0 3px var(--sff26-amber), 0 0 0 8px rgba(252, 179, 22, .28); }
.sff26-vmap .sff26-vmap__spot.is-on { animation: sff26-vmap-glow 1.6s ease-in-out infinite; }
@keyframes sff26-vmap-glow { 50% { box-shadow: 0 0 0 3px var(--sff26-amber), 0 0 0 14px rgba(252, 179, 22, .08); } }
/* the stage: a ring that keeps pulsing, so the eye finds the heart of the night */
.sff26-vmap .sff26-vmap__spot--stage::before { content: ""; position: absolute; inset: -10px; border: 2px solid var(--sff26-amber); border-radius: 50%; opacity: .9; pointer-events: none; }
.sff26-vmap.sff26-vmap--animate .sff26-vmap__spot--stage::before { animation: sff26-vmap-pulse 2.2s ease-out infinite; }
@keyframes sff26-vmap-pulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
/* the name above a lit place */
.sff26-vmap .sff26-vmap__tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: #141414;
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .2s ease, transform .25s var(--sff26-ease);
}
.sff26-vmap .sff26-vmap__tip span { font-size: 12px; font-weight: 600; color: var(--sff26-amber); }
.sff26-vmap .sff26-vmap__spot:hover .sff26-vmap__tip,
.sff26-vmap .sff26-vmap__spot:focus-visible .sff26-vmap__tip,
.sff26-vmap .sff26-vmap__spot.is-on .sff26-vmap__tip { opacity: 1; transform: translate(-50%, 0); }
.sff26-vmap .sff26-vmap__hint { display: none; }

/* venue cards and the "Getting there" buttons */
.sff26-vmap .sff26-vmap__h3 { margin: 0 0 18px; padding: 0; font-family: inherit; font-size: 22px; line-height: 1.25; font-weight: 600; color: #fff; text-transform: none; }
.sff26-vmap .sff26-vmap__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 40px; padding: 0; list-style: none; }
.sff26-vmap .sff26-vmap__ci { min-width: 0; margin: 0; padding: 0; list-style: none; }
.sff26-vmap .sff26-vmap__ci::before,
.sff26-vmap .sff26-vmap__ci::marker { content: none; }
.sff26-vmap .sff26-vmap__card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "logo name" "logo pill";
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--sff26-line);
  border-radius: 12px;
  background: var(--sff26-s1);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .25s var(--sff26-ease);
}
.sff26-vmap .sff26-vmap__card:hover,
.sff26-vmap .sff26-vmap__card.is-on { border-color: var(--sff26-amber); background: #262420; }
.sff26-vmap .sff26-vmap__card:focus-visible,
.sff26-vmap .sff26-vmap__chip:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 3px; }
.sff26-vmap .sff26-vmap__logo { grid-area: logo; display: block; width: 72px; aspect-ratio: 124 / 106; overflow: hidden; border-radius: 8px; background: #fff; }
.sff26-vmap .sff26-vmap__logo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sff26-vmap .sff26-vmap__cn { grid-area: name; min-width: 0; font-size: 17px; line-height: 1.25; font-weight: 600; color: #fff; overflow-wrap: normal; }
.sff26-vmap .sff26-vmap__card:hover .sff26-vmap__cn,
.sff26-vmap .sff26-vmap__card.is-on .sff26-vmap__cn { color: var(--sff26-amber); }
.sff26-vmap .sff26-vmap__pill { grid-area: pill; justify-self: start; padding: 4px 9px; border-radius: 999px; background: var(--sff26-c); color: var(--sff26-on); font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.sff26-vmap .sff26-vmap__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sff26-vmap .sff26-vmap__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--sff26-line);
  border-radius: 999px;
  background: var(--sff26-s1);
  color: #fff;
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.sff26-vmap .sff26-vmap__chip:hover { border-color: var(--sff26-amber); }
.sff26-vmap .sff26-vmap__chip.is-on { border-color: var(--sff26-amber); background: var(--sff26-amber); color: #141414; }
.sff26-vmap .sff26-vmap__ic { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1199px) {
  .sff26-vmap { padding-top: 96px; }
  .sff26-vmap.sff26-vmap--space-small { padding-top: 56px; }
  .sff26-vmap .sff26-vmap__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: the map keeps a readable size and scrolls sideways; the cards go two across */
@media (max-width: 767px) {
  .sff26-vmap { padding-top: 72px; }
  .sff26-vmap.sff26-vmap--space-small { padding-top: 44px; }
  .sff26-vmap .sff26-vmap__hd { margin-bottom: 28px; }
  .sff26-vmap .sff26-vmap__frame { margin-bottom: 36px; }
  .sff26-vmap .sff26-vmap__scroll { overflow-x: auto; overflow-y: hidden; border-radius: 12px; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sff26-vmap .sff26-vmap__scroll::-webkit-scrollbar { display: none; }
  .sff26-vmap .sff26-vmap__map { width: 780px; }
  .sff26-vmap .sff26-vmap__hint { display: block; margin: 10px 0 0; padding: 0; font-size: 13px; line-height: 1.4; color: var(--sff26-muted); }
  .sff26-vmap .sff26-vmap__tip { padding: 6px 9px; font-size: 13px; }
  .sff26-vmap .sff26-vmap__cards { gap: 10px; margin-bottom: 32px; }
  .sff26-vmap .sff26-vmap__card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "name" "pill"; row-gap: 8px; padding: 10px; }
  .sff26-vmap .sff26-vmap__logo { width: 64px; }
  .sff26-vmap .sff26-vmap__pill { font-size: 11px; }
  .sff26-vmap .sff26-vmap__chip { min-height: 40px; padding: 7px 14px 7px 10px; font-size: 14px; }
  .sff26-vmap .sff26-vmap__chips { gap: 8px; }
  /* Phone type: the theme sets h2 / h3 / p sizes on phones with !important */
  .sff26-vmap .sff26-vmap__h2 { font-size: 32px !important; line-height: 1.12 !important; font-weight: 600 !important; }
  .sff26-vmap .sff26-vmap__sub { font-size: 17px !important; line-height: 1.35 !important; font-weight: 600 !important; }
  .sff26-vmap .sff26-vmap__intro,
  .sff26-vmap .sff26-vmap__intro p { font-size: 16px !important; line-height: 1.55 !important; }
  .sff26-vmap .sff26-vmap__h3 { font-size: 19px !important; line-height: 1.25 !important; font-weight: 600 !important; }
  .sff26-vmap .sff26-vmap__cn { font-size: 15px !important; line-height: 1.25 !important; }
}

/* entrance: the cards rise in once (module.js adds --armed only when it can also reveal them) */
.sff26-vmap.sff26-vmap--armed .sff26-vmap__ci { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .7s var(--sff26-ease); transition-delay: calc(var(--sff26-i, 0) * 60ms); }
.sff26-vmap.sff26-vmap--armed.sff26-vmap--in .sff26-vmap__ci { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sff26-vmap .sff26-vmap__spot,
  .sff26-vmap .sff26-vmap__tip,
  .sff26-vmap .sff26-vmap__card,
  .sff26-vmap .sff26-vmap__chip { transition: none; }
  .sff26-vmap .sff26-vmap__spot.is-on,
  .sff26-vmap.sff26-vmap--animate .sff26-vmap__spot--stage::before { animation: none; }
  .sff26-vmap.sff26-vmap--armed .sff26-vmap__ci { opacity: 1; transform: none; }
}

/* the write-up window (14 Oct): a native <dialog> in the browser's top layer, opened by module.js; on phones a sheet
   that rises from the bottom */
.sff26-vmap .sff26-vmap__dlg {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: min(86vh, 760px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--sff26-line);
  border-radius: 16px;
  background: #1c1b1b;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
}
.sff26-vmap .sff26-vmap__dlg::backdrop { background: rgba(10, 10, 10, .68); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sff26-vmap .sff26-vmap__dw { position: relative; padding: 28px 28px 30px; }
.sff26-vmap .sff26-vmap__x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sff26-line);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.sff26-vmap .sff26-vmap__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sff26-vmap .sff26-vmap__x:hover,
.sff26-vmap .sff26-vmap__x:focus-visible { border-color: var(--sff26-amber); color: var(--sff26-amber); outline: none; }
.sff26-vmap .sff26-vmap__dh { display: flex; align-items: center; gap: 16px; padding-right: 48px; }
.sff26-vmap .sff26-vmap__dlogo { flex: none; width: 96px; }
.sff26-vmap .sff26-vmap__dic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: #262420; color: var(--sff26-amber); }
.sff26-vmap .sff26-vmap__dic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sff26-vmap .sff26-vmap__dn { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.sff26-vmap .sff26-vmap__dt { margin: 0; padding: 0; font-family: inherit; font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; color: #fff; text-transform: none; }
.sff26-vmap .sff26-vmap__da { margin: 18px 0 0; padding: 0; font-size: 14px; line-height: 1.5; color: var(--sff26-muted); }
.sff26-vmap .sff26-vmap__dx { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--sff26-muted); }
.sff26-vmap .sff26-vmap__dx p { margin: 0 0 12px; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.sff26-vmap .sff26-vmap__dx p:last-child { margin-bottom: 0; }
.sff26-vmap .sff26-vmap__dx a { color: var(--sff26-amber); }
.sff26-vmap .sff26-vmap__dlink { display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--sff26-amber); text-decoration: none; }
.sff26-vmap .sff26-vmap__dlink:hover,
.sff26-vmap .sff26-vmap__dlink:focus-visible { color: var(--sff26-amber); text-decoration: underline; text-underline-offset: 4px; }
/* ...and on the place's card (20 Oct, revised the same day: the tab on the card's top edge looked like it was "floating
   on the box"): a strip along the bottom of the card, a hairline above it, the label left and the logo on a white plate
   right (every plate the same size); on phones the label sits above a full-width plate. Every card in a row takes the
   row's height with its content at the top, so a sponsor strip never leaves its neighbours short or out of line */
.sff26-vmap .sff26-vmap__ci { display: flex; }
.sff26-vmap .sff26-vmap__card { align-content: start; }
.sff26-vmap .sff26-vmap__card:has(.sff26-vmap__vspon) { grid-template-areas: "logo name" "logo pill" "spon spon"; padding-bottom: 0; }
.sff26-vmap .sff26-vmap__vspon { grid-area: spon; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin: 6px -12px 0; padding: 10px 12px; border-top: 1px solid var(--sff26-line); border-radius: 0 0 11px 11px; background: rgba(255, 255, 255, .04); pointer-events: none; }
.sff26-vmap .sff26-vmap__vspon-l { flex: 0 1 auto; min-width: 0; font-size: 10px; line-height: 1.3; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sff26-muted); }
.sff26-vmap .sff26-vmap__vspon img { display: block; flex: none; box-sizing: content-box; width: 100px; height: 28px; max-width: none; padding: 5px 8px; border-radius: 6px; background: #fff; object-fit: contain; }
@media (max-width: 767px) {
  .sff26-vmap .sff26-vmap__card:has(.sff26-vmap__vspon) { grid-template-areas: "logo" "name" "pill" "spon"; }
  .sff26-vmap .sff26-vmap__vspon { flex-direction: column; align-items: stretch; gap: 6px; margin: 2px -10px 0; padding: 8px 10px 10px; }
  .sff26-vmap .sff26-vmap__vspon-l { font-size: 9px; }
  .sff26-vmap .sff26-vmap__vspon img { box-sizing: border-box; width: 100%; height: 34px; padding: 5px 8px; }
}
/* a participating sponsor in the window (20 Oct): its label, then its logo on a white tile, under a hairline */
.sff26-vmap .sff26-vmap__dspon { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--sff26-line); }
.sff26-vmap .sff26-vmap__dspon-l { font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sff26-muted); }
.sff26-vmap .sff26-vmap__dspon-a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 8px; background: #fff; }
.sff26-vmap .sff26-vmap__dspon-a img { display: block; width: auto; height: 40px; max-width: 180px; object-fit: contain; }
/* the window's links in one row: Visit website, then View menu once a menu is set (16 Oct) */
.sff26-vmap .sff26-vmap__dlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin: 22px 0 0; }
.sff26-vmap .sff26-vmap__dlinks .sff26-vmap__dlink { margin: 0; }
.sff26-vmap .sff26-vmap__arr { flex: none; width: 24px; height: 12px; transform-origin: left center; transition: transform .3s var(--sff26-ease); }
.sff26-vmap .sff26-vmap__dlink:hover .sff26-vmap__arr { transform: scaleX(1.3); }
@keyframes sff26-vmap-dlg-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .sff26-vmap .sff26-vmap__dlg[open] { animation: sff26-vmap-dlg-in .32s var(--sff26-ease); }
}
@media (max-width: 767px) {
  .sff26-vmap .sff26-vmap__dlg { width: 100%; max-height: 88vh; margin: auto 0 0; border-bottom: 0; border-radius: 16px 16px 0 0; }
  .sff26-vmap .sff26-vmap__dw { padding: 22px 18px 28px; }
  .sff26-vmap .sff26-vmap__dt { font-size: 22px; }
  .sff26-vmap .sff26-vmap__dlogo { width: 76px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Other forums (12 Oct, user: "globalise the new modules to be used on other forums"). Everything below applies only
   OFF SFF (".sff26-vmap:not(.skin-sff *)"), so SFF keeps exactly the values above. The module reads the forum skin's tokens
   (the bss.css contract: --forum-text, --forum-text-body, --forum-text-muted, --forum-text-faint, --forum-surface,
   --forum-surface-raised, --forum-line, --forum-highlight, --forum-dark, the brand palette --forum-gold / -accent /
   -orchid / -teal) and the BSS layout (--bss-max, --bss-gutter), each falling back to SFF's value. A light edition
   (BSS Cambodia) sets --forum-highlight-text to its text colour: brand colours never as small text on a light page.
   BSS forces p / li to var(--forum-text-body) !important, so each text role sets that token to its own colour.
   The map keeps its own dark backdrop and the place names over it stay dark tips (they sit on the map image).
   --------------------------------------------------------------------------------------------------------------- */
.sff26-vmap:not(.skin-sff *) {
  --sff26-gut: 15px; /* BSS's phone gutter (from 768px: --bss-gutter, below) */
  --sff26-max: var(--forum-content-max, var(--bss-max, 1416px));
  --sff26-amber: var(--forum-highlight, #FCB316);
  --sff26-hl-text: var(--forum-highlight-text, var(--forum-highlight, #FCB316));
  --sff26-fg: var(--forum-text, #fff);
  --sff26-pal-amber: var(--forum-gold, var(--forum-highlight, #FCB316));
  --sff26-pal-red: var(--forum-highlight, #E53935);
  --sff26-pal-blue: var(--forum-accent, #3399FF);
  --sff26-pal-pink: var(--forum-orchid, #FF88A2);
  --sff26-pal-green: var(--forum-teal, #76C893);
  --sff26-pal-amber-ink: var(--forum-dark, #141414); /* fallback for browsers without relative colours */
  --sff26-pal-red-ink: var(--forum-dark, #141414);
  --sff26-pal-blue-ink: var(--forum-dark, #141414);
  --sff26-pal-pink-ink: var(--forum-dark, #141414);
  --sff26-pal-green-ink: var(--forum-dark, #141414);
  --sff26-muted: var(--forum-text-muted, #cfcfcf);
  --sff26-line: var(--forum-line, rgba(255, 255, 252, .14));
  --sff26-s1: var(--forum-surface, #1e1d1d);
  --sff26-hl-ink: var(--forum-dark, #141414); /* text on the highlight; below, from its lightness */
  --forum-text-body: var(--sff26-muted);
  color: var(--sff26-fg);
}
@supports (color: oklch(from red l c h)) {
  .sff26-vmap:not(.skin-sff *) {
    --sff26-hl-ink: oklch(from var(--sff26-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    /* ink on a palette fill: white on a dark fill, a near-black on a light one (River Stone's oklch) */
    --sff26-pal-amber-ink: oklch(from var(--sff26-pal-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-red-ink: oklch(from var(--sff26-pal-red) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-blue-ink: oklch(from var(--sff26-pal-blue) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-pink-ink: oklch(from var(--sff26-pal-pink) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-green-ink: oklch(from var(--sff26-pal-green) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
  }
}
@media (min-width: 768px) {
  .sff26-vmap:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}
.sff26-vmap:not(.skin-sff *) .sff26-vmap__h2,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__h3,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__cn,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__chip { color: var(--sff26-fg); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__sub,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__intro a,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card:hover .sff26-vmap__cn,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card.is-on .sff26-vmap__cn { --forum-text-body: var(--sff26-hl-text); color: var(--sff26-hl-text); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card:hover,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card.is-on { background: var(--forum-surface-raised, #262420); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__chip.is-on { color: var(--sff26-hl-ink); }
/* BSS sets text inside a list item to inherit when its inline style holds #fff (meant for text typed in white). That
   catches the pills (SFF's white ink is in their style as the fallback), so each card carries its pill's ink and the
   pill inherits it; the place name keeps its own colour */
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card:has(> .sff26-vmap__pill[style*="--sff26-pal-red-ink"]) { color: var(--sff26-pal-red-ink); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card:has(> .sff26-vmap__pill[style*="--sff26-pal-blue-ink"]) { color: var(--sff26-pal-blue-ink); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card:has(> .sff26-vmap__pill[style*="--sff26-pal-green-ink"]) { color: var(--sff26-pal-green-ink); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card:has(> .sff26-vmap__pill[style*="--sff26-pal-amber-ink"]) { color: var(--sff26-pal-amber-ink); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card:has(> .sff26-vmap__pill[style*="--sff26-pal-pink-ink"]) { color: var(--sff26-pal-pink-ink); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__card:has(> .sff26-vmap__pill[style*="--sff26-on: #FFFFFF"]) { color: #FFFFFF; }
/* white logo tiles: a hairline keeps their edge on a light card (none on a dark one) */
.sff26-vmap:not(.skin-sff *) .sff26-vmap__logo { outline: 1px solid var(--forum-line, transparent); outline-offset: -1px; }
/* the lit places: rings in the forum's highlight; the tips stay dark over the map */
.sff26-vmap:not(.skin-sff *) .sff26-vmap__spot:hover,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__spot:focus-visible,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__spot.is-on { box-shadow: 0 0 0 3px var(--sff26-amber), 0 0 0 8px rgba(var(--forum-highlight-rgb, 252, 179, 22), .28); }
@keyframes sff26-vmap-glow-forum { 50% { box-shadow: 0 0 0 3px var(--sff26-amber), 0 0 0 14px rgba(var(--forum-highlight-rgb, 252, 179, 22), .08); } }
@media (prefers-reduced-motion: no-preference) {
  .sff26-vmap:not(.skin-sff *) .sff26-vmap__spot.is-on { animation-name: sff26-vmap-glow-forum; }
}
.sff26-vmap:not(.skin-sff *) .sff26-vmap__tip { background: var(--forum-dark, #141414); color: #fff; }
/* the write-up window: the forum's raised surface and its text colours */
.sff26-vmap:not(.skin-sff *) .sff26-vmap__dlg { background: var(--forum-surface-raised, #1c1b1b); color: var(--sff26-fg); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__dt,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__x { color: var(--sff26-fg); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__da,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__dx { --forum-text-body: var(--sff26-muted); color: var(--sff26-muted); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__dx a,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__dlink,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__dlink:hover,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__x:hover,
.sff26-vmap:not(.skin-sff *) .sff26-vmap__x:focus-visible { color: var(--sff26-hl-text); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__dic { background: var(--forum-surface, #262420); color: var(--sff26-hl-text); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__dspon { border-top-color: var(--forum-line, var(--sff26-line)); }
.sff26-vmap:not(.skin-sff *) .sff26-vmap__dspon-l { color: var(--sff26-muted); }