/* =========================================================================
   VibeSpot — Blog (/blog/ and /blog/<slug>/)

   Loaded after styles.css, never instead of it. The nav, buttons, cards,
   chips, vibe markers, the final CTA card, the city index and the footer all
   come from there unchanged; this file only adds what a blog needs that the
   landing did not have: a post grid, an article header, long-form type and a
   share rail.

   Every colour, shadow, radius and ease is a styles.css token. The site has
   no dark theme, so the blog has none either: a dark blog inside a light site
   would read as a different product.
   ========================================================================= */

.bl-page {
  --bl-gutter: 28px;
  --bl-read: 700px;              /* ~68 characters of body text per line */
  --bl-radius: 22px;
  --bl-sticky-top: 112px;        /* sticky nav: 18px padding + 62px pill + air */
}

/* ---------- nav on a page without a hero ----------
   The home nav floats over the hero (position: fixed). Blog pages have
   nothing behind it, so it takes its own row and sticks, as it does on the
   partner and support pages. main.js still drives the menu and the
   scrolled state. */
.bl-page .vs-nav { position: sticky; }
.vs-nav__links > a[aria-current] { color: var(--vs-accent); }
.vs-nav__links > a[aria-current]::after { transform: scaleX(1); }

/* shared wrapper: the same 1080px column the landing sections use */
.bl-wrap { width: 100%; max-width: var(--vs-maxw-narrow); margin: 0 auto; }

/* =========================================================================
   BLOG INDEX — intro
   ========================================================================= */
.bl-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 6vw, 80px) var(--bl-gutter) clamp(28px, 4vw, 48px);
}
/* A patch of the hero map on the right, fading into the page, with the same
   pins the home hero uses. Decoration only; the copy never sits on it. */
.bl-hero__map {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 54%;
  background: #e9eef0 url("/assets/map.jpg") 64% 40% / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 78% 86% at 70% 46%, #000 34%, transparent 74%);
  mask-image: radial-gradient(ellipse 78% 86% at 70% 46%, #000 34%, transparent 74%);
}
.bl-hero__inner { position: relative; z-index: 10; }
.bl-hero__copy { max-width: 600px; }
.bl-hero__title {
  margin: 14px 0 0;
  font-size: clamp(2.3rem, 1.25rem + 4vw, 3.9rem);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--vs-ink);
  text-wrap: balance;
}
.bl-hero__sub {
  margin: 18px 0 0;
  max-width: 540px;
  font-size: var(--fs-sub);
  line-height: 1.6;
  font-weight: 500;
  color: var(--vs-text-2);
}
.bl-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 26px 0 0; }
.bl-rss {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--vs-muted);
  text-decoration: none;
  transition: color .2s var(--vs-ease);
}
.bl-rss svg { width: 16px; height: 16px; flex: 0 0 auto; }
.bl-rss:hover { color: var(--vs-accent); }

/* =========================================================================
   POST GRID + CARD (index and "Keep reading")
   ========================================================================= */
.bl-posts { padding: 0 var(--bl-gutter) clamp(48px, 7vw, 88px); }
.bl-posts__label {
  margin: 0 0 18px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vs-muted-2);
}
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.bl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--bl-radius);
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  box-shadow: var(--vs-shadow-sm);
  overflow: hidden;
  transition: transform .3s var(--vs-ease), box-shadow .3s var(--vs-ease), border-color .3s var(--vs-ease);
}
/* the accent bar that draws in on hover, as on the landing's .vs-card */
.bl-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: 3px;
  background: var(--vs-accent-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--vs-ease);
}
.bl-card:hover { transform: translateY(-6px); box-shadow: var(--vs-shadow-md); border-color: var(--vs-border-strong); }
.bl-card:hover::before { transform: scaleX(1); }

/* The map sits under every cover, so a slow or missing image still reads as
   Vibespot rather than as a grey hole. */
.bl-card__media {
  position: relative;
  aspect-ratio: 1200 / 630;
  background: #e9eef0 url("/assets/map.jpg") center / cover no-repeat;
  overflow: hidden;
}
.bl-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--vs-ease);
}
.bl-card:hover .bl-card__media img { transform: scale(1.04); }

.bl-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.bl-card__kicker {
  margin: 0;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vs-accent);
}
.bl-card__title {
  margin: 10px 0 0;
  font-size: 21px; line-height: 1.22; font-weight: 800; letter-spacing: -0.01em;
  color: var(--vs-ink);
  text-wrap: balance;
}
/* One link per card, stretched over the whole card: a screen reader hears
   the title, not the card read out as one long link. */
.bl-card__title a { color: inherit; text-decoration: none; }
.bl-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--bl-radius); }
.bl-card__title a:focus-visible { outline: none; }
.bl-card__title a:focus-visible::after { outline: 2.5px solid var(--vs-accent); outline-offset: 3px; }
.bl-card__excerpt {
  margin: 10px 0 0;
  font-size: 16px; line-height: 1.55; font-weight: 500;
  color: var(--vs-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.bl-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: auto 0 0; padding-top: 18px;
  font-size: 14px; font-weight: 600; color: var(--vs-muted-2);
}
.bl-meta > * + *::before {
  content: "";
  display: inline-block; vertical-align: middle;
  width: 3px; height: 3px; margin: -2px 10px 0 0; border-radius: 50%;
  background: var(--vs-faint);
}

/* the newest post leads the index across the full row */
@media (min-width: 761px) {
  .bl-grid--index > .bl-card:first-child { grid-column: 1 / -1; flex-direction: row; }
  .bl-grid--index > .bl-card:first-child .bl-card__media { flex: 0 0 56%; aspect-ratio: auto; min-height: 340px; }
  .bl-grid--index > .bl-card:first-child .bl-card__body { justify-content: center; padding: clamp(28px, 3.4vw, 44px); }
  .bl-grid--index > .bl-card:first-child .bl-card__title {
    font-size: clamp(26px, 1.1rem + 1.5vw, 36px); line-height: 1.1; font-weight: 900; letter-spacing: -0.02em;
  }
  .bl-grid--index > .bl-card:first-child .bl-card__excerpt { font-size: 17.5px; -webkit-line-clamp: 4; }
  .bl-grid--index > .bl-card:first-child .bl-meta { margin-top: 0; padding-top: 22px; }
}

/* =========================================================================
   ARTICLE — header
   ========================================================================= */
.bl-head {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 44px) var(--bl-gutter) 0;
}
/* the soft blue glow the landing's CTA card carries */
.bl-head::before {
  content: "";
  position: absolute; right: -8%; top: -220px;
  width: 720px; height: 520px;
  background: radial-gradient(closest-side, rgba(0, 93, 242, 0.12), rgba(0, 93, 242, 0));
  pointer-events: none;
}
.bl-head__inner { position: relative; }

.bl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 700; color: var(--vs-muted-2); }
.bl-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--vs-faint); }
.bl-crumbs a { color: var(--vs-muted); text-decoration: none; transition: color .2s var(--vs-ease); }
.bl-crumbs a:hover { color: var(--vs-accent); }

.bl-head .vs-eyebrow { display: block; margin-top: clamp(22px, 3vw, 34px); }
.bl-title {
  margin: 12px 0 0;
  max-width: 900px;
  font-size: clamp(2.1rem, 1.15rem + 3.5vw, 3.6rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--vs-ink);
  text-wrap: balance;
}
.bl-dek {
  margin: 18px 0 0;
  max-width: 760px;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--vs-text-2);
  text-wrap: pretty;
}

.bl-byline { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.bl-byline__mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--vs-accent); background-image: var(--vs-accent-grad);
  box-shadow: var(--vs-shadow-accent-sm);
}
/* Every meta item carries its own leading dot, and the row is pulled left by
   one dot's width inside a clipping box. Whichever item starts a line - the
   first, or one that wrapped on a phone - has its dot clipped, so no line
   ever opens with a stray separator. */
.bl-byline__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.bl-byline__name { font-size: 16px; font-weight: 800; color: var(--vs-ink); }
.bl-byline__meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; margin-left: -18px; font-size: 14.5px; font-weight: 600; color: var(--vs-muted-2); }
.bl-byline__meta > span::before { content: "\00B7"; display: inline-block; width: 18px; text-align: center; color: var(--vs-faint); }
.bl-byline__meta time { color: var(--vs-muted); }

/* ---------- cover: straddles the grey header and the white article ---------- */
.bl-coverwrap {
  padding: clamp(28px, 4vw, 40px) var(--bl-gutter) 0;
  background: linear-gradient(to bottom, var(--vs-bg) 55%, var(--vs-surface) 55%);
}
.bl-cover { margin: 0 auto; max-width: var(--vs-maxw-narrow); }
.bl-cover img {
  width: 100%; height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 28px;
  background: #e9eef0 url("/assets/map.jpg") center / cover no-repeat;
  box-shadow: var(--vs-shadow-lg);
}

/* =========================================================================
   ARTICLE — body band, reading column and share rail
   ========================================================================= */
.bl-band {
  background: var(--vs-surface);
  border-bottom: 1px solid var(--vs-border);
  padding: clamp(36px, 5vw, 64px) var(--bl-gutter) clamp(56px, 7vw, 88px);
}
.bl-layout {
  max-width: var(--vs-maxw-narrow);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, var(--bl-read)) minmax(240px, 290px);
  justify-content: space-between;
  gap: 48px;
  align-items: start;
}
.bl-col { min-width: 0; }

/* ---------- long-form type ----------
   Typography is scoped to direct children of the rendered Markdown, so a
   component placed in a post (a vibe card, a map embed) keeps its own
   styles instead of inheriting paragraph margins. */
.bl-prose {
  font-size: clamp(17px, 16.2px + 0.25vw, 19px);
  line-height: 1.75;
  font-weight: 400;
  color: var(--vs-text);
  overflow-wrap: break-word;
}
.bl-prose > * { margin: 0; }
.bl-prose > * + * { margin-top: 1.15em; }
.bl-prose > p:first-child { font-size: 1.12em; line-height: 1.65; font-weight: 500; color: var(--vs-ink); }

.bl-prose > h2 {
  margin-top: 2em;
  font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.05rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--vs-ink);
  text-wrap: balance;
  scroll-margin-top: var(--bl-sticky-top);
}
.bl-prose > h3 {
  margin-top: 1.7em;
  font-size: 1.22em;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--vs-ink);
  scroll-margin-top: var(--bl-sticky-top);
}
.bl-prose > h4 { margin-top: 1.5em; font-size: 1em; font-weight: 800; color: var(--vs-ink); }
.bl-prose > :is(h2, h3, h4) + * { margin-top: 0.6em; }

.bl-prose a:not([class]) {
  color: var(--vs-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 93, 242, 0.28);
  transition: text-decoration-color .2s var(--vs-ease), color .2s var(--vs-ease);
}
.bl-prose a:not([class]):hover { color: var(--vs-accent-active); text-decoration-color: currentColor; }
.bl-prose strong { font-weight: 700; color: var(--vs-ink); }
.bl-prose em { font-style: italic; }

/* lists: accent dots, and numbered steps in the landing's step circles */
.bl-prose :is(ul, ol):not([class]) { margin-left: 0; padding: 0; list-style: none; }
.bl-prose :is(ul, ol):not([class]) > li { position: relative; padding-left: 32px; }
.bl-prose :is(ul, ol):not([class]) > li + li { margin-top: 0.55em; }
.bl-prose ul:not([class]) > li::before {
  content: "";
  position: absolute; left: 8px; top: 0.66em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vs-accent-grad);
  box-shadow: 0 0 0 4px var(--vs-accent-soft);
}
.bl-prose ol:not([class]) { counter-reset: bl-ol; }
.bl-prose ol:not([class]) > li { counter-increment: bl-ol; padding-left: 42px; }
.bl-prose ol:not([class]) > li::before {
  content: counter(bl-ol);
  position: absolute; left: 0; top: 0.2em;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--vs-accent-grad);
  box-shadow: 0 6px 14px rgba(0, 93, 242, 0.26);
  color: #fff; font-size: 14px; font-weight: 800; line-height: 28px; text-align: center;
}
.bl-prose li > p { margin: 0; }
.bl-prose li > p + p,
.bl-prose li > :is(ul, ol) { margin-top: 0.55em; }

.bl-prose > blockquote {
  position: relative;
  margin: 1.8em 0;
  padding: 24px 26px 24px 30px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f5f9ff 0%, #eef4ff 100%);
  border: 1px solid #e0eafc;
  font-size: 1.1em;
  line-height: 1.55;
  font-weight: 600;
  color: var(--vs-ink);
}
.bl-prose > blockquote::before {
  content: "";
  position: absolute; left: -1px; top: 22px; bottom: 22px;
  width: 4px; border-radius: 0 4px 4px 0;
  background: var(--vs-accent-grad);
}
.bl-prose > blockquote p { margin: 0; }
.bl-prose > blockquote p + p { margin-top: 0.6em; }

.bl-prose img { display: block; max-width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--vs-border); box-shadow: var(--vs-shadow-sm); }
.bl-prose > figure { margin: 2em 0; }
.bl-prose figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--vs-muted-2); text-align: center; }

/* three quiet dots, not a rule across the page */
.bl-prose > hr {
  width: 64px; height: 8px;
  margin: 2.4em auto;
  border: 0;
  background: radial-gradient(circle, var(--vs-faint) 3px, transparent 3.5px) center / 22px 8px repeat-x;
}

.bl-prose :not(pre) > code {
  padding: 0.12em 0.42em;
  border-radius: 6px;
  background: var(--vs-soft);
  border: 1px solid var(--vs-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}
.bl-prose > pre {
  padding: 18px 20px;
  border-radius: 16px;
  background: #0b1220;
  color: #dce6f8;
  overflow-x: auto;
  font-size: 14.5px;
  line-height: 1.6;
}
.bl-prose > pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.bl-prose > table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.9em; line-height: 1.5; }
.bl-prose th, .bl-prose td { padding: 10px 14px; border-bottom: 1px solid var(--vs-border); text-align: left; vertical-align: top; }
.bl-prose th { font-weight: 800; color: var(--vs-ink); background: var(--vs-soft); white-space: nowrap; }

/* ---------- components a post may place in its body ---------- */
/* a tip or aside: <aside class="bl-callout"><p>...</p></aside> */
.bl-prose > .bl-callout {
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--vs-success-bg);
  border: 1px solid var(--vs-success-border);
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--vs-text);
}
.bl-callout > * { margin: 0; }
.bl-callout > * + * { margin-top: 0.5em; }
.bl-callout b, .bl-callout strong { color: var(--vs-success); font-weight: 800; }

/* the landing's vibe cards, stacked: <div class="bl-vibes"><div class="vs-acard">... */
.bl-prose > .bl-vibes { display: grid; gap: 12px; margin-top: 1.4em; margin-bottom: 1.4em; }
.bl-prose > .bl-vibes .vs-acard:hover { transform: none; }

/* a live map in the post, same URL shape as the city pages' frame:
   <figure class="bl-embed"><iframe src="https://app.vibespot.com/?coords=..&zoom=12&embed=1&breakout=all" ...></iframe><figcaption>..</figcaption></figure> */
.bl-prose > .bl-embed { margin: 2em 0; }
.bl-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 22px;
  background: #e9eef0 url("/assets/map.jpg") center / cover no-repeat;
  box-shadow: var(--vs-shadow-md);
}

/* ---------- tags under the body ---------- */
.bl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(36px, 5vw, 52px); padding-top: 24px; border-top: 1px solid var(--vs-border); }
.bl-tags__label { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-muted-2); }
.bl-tags__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-tags .vs-chip { margin: 0; height: 36px; padding: 0 14px; font-size: 14px; text-decoration: none; }
.bl-tags a.vs-chip { transition: color .2s var(--vs-ease), border-color .2s var(--vs-ease), box-shadow .2s var(--vs-ease); }
.bl-tags a.vs-chip:hover { color: var(--vs-accent); border-color: var(--vs-border-strong); box-shadow: var(--vs-shadow-sm); }

/* ---------- share rail ---------- */
.bl-aside {
  position: sticky;
  top: var(--bl-sticky-top);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bl-share {
  padding: 20px;
  border-radius: 20px;
  background: var(--vs-soft);
  border: 1px solid var(--vs-border);
}
.bl-share__label { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-muted-2); }
.bl-share__row { display: flex; gap: 10px; margin-top: 12px; }
.bl-share__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border-radius: 999px;
  background: var(--vs-surface);
  border: 1px solid var(--vs-border-strong);
  box-shadow: var(--vs-shadow-xs);
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--vs-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--vs-ease), border-color .2s var(--vs-ease), box-shadow .2s var(--vs-ease), transform .2s var(--vs-ease), background-color .2s var(--vs-ease);
}
.bl-share__btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.bl-share__btn:hover { color: var(--vs-accent); border-color: var(--vs-border-strong); box-shadow: var(--vs-shadow-sm); transform: translateY(-1px); }
.bl-share__btn--copy { flex: 1 1 auto; }
.bl-share__btn--icon { flex: 0 0 44px; width: 44px; padding: 0; }
.bl-share__btn.is-copied { color: var(--vs-success); background: var(--vs-success-bg); border-color: var(--vs-success-border); }

/* the live map, as a card: the landing's map, pins and here-dot */
.bl-mapcard {
  display: block;
  border-radius: var(--bl-radius);
  overflow: hidden;
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  box-shadow: var(--vs-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--vs-ease), box-shadow .3s var(--vs-ease), border-color .3s var(--vs-ease);
}
.bl-mapcard:hover { transform: translateY(-4px); box-shadow: var(--vs-shadow-md); border-color: var(--vs-border-strong); }
.bl-mapcard__map {
  position: relative;
  display: block;
  height: 156px;
  background: #e9eef0 url("/assets/map.jpg") 60% 38% / 170% auto no-repeat;
  overflow: hidden;
}
.bl-mapcard__map::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 52%, #fff 100%);
}
.bl-mapcard__body { display: flex; flex-direction: column; gap: 6px; padding: 2px 20px 20px; }
.bl-mapcard__title { font-size: 18px; line-height: 1.25; font-weight: 800; color: var(--vs-ink); }
.bl-mapcard__text { font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--vs-muted); }
.bl-mapcard .vs-btn { align-self: flex-start; margin-top: 10px; }
.bl-mapcard:hover .vs-btn svg { transform: translateX(3px); }

/* =========================================================================
   ARTICLE — keep reading
   ========================================================================= */
.bl-related { padding: clamp(8px, 2vw, 16px) var(--bl-gutter) clamp(56px, 7vw, 88px); }
.bl-related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(22px, 3vw, 30px); }
.bl-related__title { margin: 10px 0 0; font-size: var(--fs-h2-sm); line-height: 1.12; font-weight: 900; letter-spacing: -0.025em; color: var(--vs-ink); }
.bl-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--vs-accent);
  text-decoration: none;
}
.bl-more svg { transition: transform .25s var(--vs-ease); }
.bl-more:hover svg { transform: translateX(3px); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1000px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .bl-grid--related > .bl-card:nth-child(3) { display: none; }  /* two across, not two and an orphan */
  .bl-hero__map { width: 48%; opacity: .85; }
}

@media (max-width: 980px) {
  /* one column: the rail follows the article instead of riding beside it */
  .bl-layout { grid-template-columns: minmax(0, 1fr); max-width: var(--bl-read); gap: 36px; }
  .bl-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .bl-head__inner { max-width: var(--bl-read); }
}

@media (max-width: 880px) {
  .vs-nav__links > a[aria-current] { background: var(--vs-accent-soft); }
}

@media (max-width: 760px) {
  .bl-hero__map { display: none; }
  .bl-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bl-grid--related > .bl-card:nth-child(3) { display: flex; }
  .bl-aside { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .bl-page { --bl-gutter: 20px; --bl-radius: 20px; --bl-sticky-top: 100px; }
  .bl-card__body { padding: 20px 20px 22px; }
  .bl-card__title { font-size: 20px; }
  .bl-cover img { border-radius: 20px; }
  .bl-coverwrap { background: linear-gradient(to bottom, var(--vs-bg) 60%, var(--vs-surface) 60%); }
  .bl-byline { align-items: flex-start; }
  .bl-byline__mark { width: 40px; height: 40px; border-radius: 12px; }
  .bl-prose > blockquote { padding: 20px 20px 20px 24px; }
  .bl-prose ol:not([class]) > li { padding-left: 38px; }
  .bl-related__head .bl-more { order: 2; }
}

@media (max-width: 380px) {
  .bl-page { --bl-gutter: 16px; }
  .bl-share { padding: 16px; }
  .bl-share__btn { padding: 0 14px; font-size: 14.5px; }
  .bl-share__btn--icon { padding: 0; }
  .bl-byline__meta { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-card, .bl-card__media img, .bl-mapcard { transition: none; }
  .bl-card:hover, .bl-mapcard:hover { transform: none; }
  .bl-card:hover .bl-card__media img { transform: none; }
}

/* =========================================================================
   PRINT — the article, without the site around it
   ========================================================================= */
@media print {
  .vs-nav, .vs-skip, .bl-aside, .vs-cta, .bl-related, .vs-cities, .vs-footer, .vs-appmodal { display: none !important; }
  .bl-head::before { display: none; }
  .bl-band, .bl-coverwrap { background: none; border: 0; padding-left: 0; padding-right: 0; }
  .bl-layout { display: block; max-width: none; }
  .bl-cover img { box-shadow: none; }
  .bl-prose { font-size: 12pt; color: #000; }
  .bl-prose a:not([class])::after { content: " (" attr(href) ")"; font-weight: 400; color: #555; }
}