/* BlockFlockNow — the site revealed after the scroll finale.
 *
 * The scroll stage is position:fixed and owns the viewport until the camera
 * reaches the door. `body.site-open` is set by site.js once the finale clip has
 * faded to black; everything here is scoped to that class so the scroll world
 * is untouched until then. The handoff reads as seamless because the clip's
 * final frame is black and this section's first screen is black.
 */

:root { --bfn-alert: #D94A4A; }   /* crimson, same as the finale scene accent */

#site {
  position: relative;
  /* Below .sw-stage (10) during the flight, so the film always covers it.
     The moment the final scene fades to opacity 0 the site is what shows
     through — instead of the bare sky and its drifting particles, which sit at
     z-index 0 behind everything. Raised above the stage once site-open. */
  z-index: 5;
  /* The engine adds +1vh of runout past the last scene so the final flight can
     complete. That runout is dead space: the scene has already faded out, so it
     rendered as a screen of empty sky. Pull the site up into it so the content
     arrives as the door closes rather than after a gap. */
  margin-top: -78vh;
  background: transparent;
  color: var(--sw-ink);
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
body.site-open #site { z-index: 30; }

/* ---- Handoff fade -------------------------------------------------------
   Transparent at the top so the last frame of film reads through, resolving to
   the page colour by the bottom. A faint bluish-white bloom sits in the middle
   so the join reads as light dissolving rather than two flat colours meeting.
   Tall on purpose: a short fade still looks like a seam. */
.bfn-fade {
  height: 62vh;
  pointer-events: none;
  background:
    radial-gradient(78% 52% at 50% 62%,
      rgba(178, 206, 232, .085) 0%, rgba(178, 206, 232, 0) 72%),
    linear-gradient(180deg,
      rgba(8, 17, 31, 0)    0%,
      rgba(8, 17, 31, .28) 34%,
      rgba(8, 17, 31, .72) 62%,
      rgba(8, 17, 31, .94) 84%,
      var(--sw-bg)        100%);
}

/* ---- Atmosphere cool-down ------------------------------------------------
   The engine writes the ACTIVE SECTION's accent into --sw-accent on #world,
   and the final scene ("Abuse of Power") is crimson #D94A4A. .sw-sky__glow is
   built from that variable, so the whole sky turns red for the last scene.
   Invisible against a black page; against the navy news page it reads as a
   dirty red band butting into blue.

   So for the run-in we take the glow off the accent variable entirely and
   paint a fixed bluish-white bloom instead — cool, matching the film's own
   grade (its poster averages rgb(40,72,91) and its highlights are near-white
   blue). The sky settles to the page navy rather than pure black so there is
   no tonal step at the handoff either. */
.sw-sky, .sw-sky__glow, .sw-particles {
  transition: background-color .8s ease, background-image .8s ease, opacity .8s ease;
}
body.site-approaching .sw-sky {
  background-color: var(--sw-bg) !important;
}
body.site-approaching .sw-sky__glow {
  background:
    radial-gradient(62% 44% at 68% 22%, rgba(176, 205, 232, .13) 0%, rgba(176, 205, 232, 0) 72%),
    radial-gradient(54% 40% at 36% 66%, rgba(32, 54, 75, .5) 0%, rgba(32, 54, 75, 0) 74%) !important;
}
body.site-approaching .sw-particles { opacity: 0 !important; }
/* Stop compositing the drift once it is invisible. */
body.site-open .sw-particles { display: none; }

/* Retire the scroll chrome once the site is open. Transitions are short —
   the frame is already black, so this is cleanup, not a visual effect. */
.sw-stage,
.sw-copylayer,
.sw-route,
.sw-hint {
  transition: opacity .45s ease;
}
body.site-open .sw-stage,
body.site-open .sw-copylayer,
body.site-open .sw-route,
body.site-open .sw-hint {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.site-open .sw-scrollbar { opacity: 0; transition: opacity .3s; }

/* ---- Top bar -------------------------------------------------------------
   The bar is deliberately transparent over the scroll world — it floats on the
   film. Once we're through the door it becomes a real header: solid, with a
   hairline under it, so news cards scroll behind it instead of bleeding
   through the logo. The engine keeps owning the markup; we only restyle it. */
.sw-topbar {
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease,
              padding .4s ease, backdrop-filter .4s ease;
}
body.site-open .sw-topbar {
  background: color-mix(in srgb, var(--sw-bg) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: color-mix(in srgb, var(--sw-ink-soft) 18%, transparent);
  padding-top: 14px;
  padding-bottom: 14px;
}
/* "See the documented cases" points at #cases — where you already are. */
body.site-open .sw-topcta {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  /* opacity keeps its LAYOUT space, which pushed the homepage nav ~150px
     off the right edge while inner pages sat at their padding — the "why
     don't the headers match" bug. Remove it from flow once faded. */
  position: absolute;
  visibility: hidden;
}

/* Clear the fixed header. 14 + 60 (logo) + 14 = 88px, plus breathing room. */
body.site-open .bfn-hero { padding-top: 132px; }

/* Note: a sticky filter bar was tried and removed. The engine sets
   overflow-x:hidden on html/body to stop horizontal drift from the scene
   transforms, and that turns the root into a scroll container, which disables
   position:sticky for everything inside it. Overriding that overflow to get
   sticky filters would risk the scroll world for a nicety — not worth it. With
   an opaque header the filters simply scroll out of sight behind it, which is
   the behaviour we actually needed. */

@media (max-width: 860px) {
  /* Engine shrinks the mark to 48x46 here, so the bar is shorter. */
  body.site-open .bfn-hero { padding-top: 112px; }
}

/* ------------------------------------------------------------ site header */

.bfn-hero {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 12vh, 140px) clamp(20px, 6vw, 80px) clamp(40px, 8vh, 90px);
  /* Flat page colour. The gradient work happens in .bfn-fade above, so the
     hero has nothing to blend against and cannot introduce a second seam. */
  background: var(--sw-bg);
}
.bfn-hero__eyebrow {
  font-family: "Space Grotesk", Sora, system-ui, sans-serif;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bfn-alert);
  margin: 0 0 18px;
}
.bfn-hero__title {
  font-family: "Space Grotesk", Sora, system-ui, sans-serif;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 20px;
  max-width: 18ch;
}
.bfn-hero__lede {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  color: var(--sw-ink-soft);
  max-width: 62ch;
  margin: 0;
}

/* ------------------------------------------------------------------- news */

.bfn-news {
  /* The header is fixed, so an #cases jump would otherwise park the heading
     underneath it. */
  scroll-margin-top: 100px;
  padding: 0 clamp(20px, 6vw, 80px) clamp(80px, 14vh, 160px);
  background: var(--sw-bg);
}
.bfn-section-head {
  display: flex; align-items: baseline; gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--sw-ink-soft) 16%, transparent);
  margin-bottom: 28px;
}
.bfn-section-head h2 {
  font-family: "Space Grotesk", Sora, system-ui, sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700; letter-spacing: -.01em;
  margin: 0;
}
.bfn-status { font-size: .86rem; color: var(--bfn-muted); }

/* Sourcing note. Sits directly under the section heading so the provenance
   claim is read before the incidents, not buried in the footer. */
.bfn-sourcing {
  margin: -12px 0 26px;
  max-width: 76ch;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--bfn-muted);
}

.bfn-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 34px;
}
.bfn-filter {
  font: inherit; font-size: .82rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sw-ink-soft) 24%, transparent);
  background: transparent;
  color: var(--sw-ink-soft);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.bfn-filter span { opacity: .55; margin-left: 4px; font-variant-numeric: tabular-nums; }
.bfn-filter:hover { color: var(--sw-ink); border-color: color-mix(in srgb, var(--sw-accent) 55%, transparent); }
.bfn-filter.is-active {
  background: var(--sw-accent); color: var(--sw-bg); border-color: var(--sw-accent);
}
.bfn-filter.is-active span { opacity: .5; }

.bfn-news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
}
/* Hub teaser shows exactly 6 — cap at 3 columns so the grid always fills
   evenly (3x2, 2x3, or 1x6) instead of leaving a ragged last row. */
.bfn-news-list[data-mode="latest"] {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
  .bfn-news-list[data-mode="latest"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .bfn-news-list[data-mode="latest"] { grid-template-columns: 1fr; }
}

.bfn-card {
  display: flex; flex-direction: column;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--sw-ink-soft) 16%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bfn-surface) 55%, transparent);
  transition: border-color .2s, transform .2s;
}
.bfn-card:hover { border-color: color-mix(in srgb, var(--sw-accent) 40%, transparent); transform: translateY(-2px); }
/* Stacked, one line each — inline wrapping made every card's header a
   different shape depending on text length. */
.bfn-card__meta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bfn-muted);
  margin-bottom: 14px;
  /* Three slots (category / location / date) even when location is missing,
     so titles start at the same height across a row. */
  min-height: calc(3.6em + 10px);
}
.bfn-card__cat { color: var(--bfn-alert); font-weight: 700; }
/* Secondary tags read as supporting labels, not competing headlines. */
.bfn-card__cat--alt { color: var(--bfn-muted); font-weight: 600; }
.bfn-card__cat--alt::before { content: "· "; }
.bfn-card__title {
  font-family: "Space Grotesk", Sora, system-ui, sans-serif;
  font-size: 1.12rem; font-weight: 700; line-height: 1.32;
  margin: 0 0 12px;
}
.bfn-card__summary {
  font-size: .92rem; line-height: 1.62; color: var(--sw-ink-soft);
  margin: 0 0 14px;
}
.bfn-card__why {
  font-size: .86rem; line-height: 1.58; color: var(--bfn-muted);
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--bfn-alert) 55%, transparent);
}
.bfn-card__why strong { color: var(--sw-ink); font-weight: 600; }
.bfn-card__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--sw-ink-soft) 11%, transparent);
  font-size: .8rem;
}
.bfn-card__src { color: var(--sw-accent); text-decoration: none; }
.bfn-card__src:hover { text-decoration: underline; }
.bfn-card__count { color: var(--bfn-muted); }

/* The expand control only exists on phones (see the ≤700px block); on desktop
   the whole card is already visible, so the button would be a no-op. */
.bfn-card__toggle { display: none; }

@media (max-width: 700px) {
  /* Collapsed card: ~4 lines of summary and nothing else. Feed density matters
     more than completeness here — the point is to let someone skim past a story
     they don't care about in one thumb-flick. Tap expands in place.
     line-clamp needs the -webkit- prefixed box even in 2026: the unprefixed
     `line-clamp` is still not supported in Safari, which is most of this
     audience. */
  .bfn-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .bfn-card__why { display: none; }

  .bfn-card__toggle {
    display: inline-block;
    margin: 0 0 14px;
    padding: 7px 0;
    background: none; border: 0;
    color: var(--sw-accent);
    font: 600 .84rem/1 inherit;
    letter-spacing: .02em;
    cursor: pointer;
    /* Comfortable thumb target without visually enlarging the link. */
    min-height: 34px;
  }

  .bfn-card.is-open .bfn-card__summary {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
  .bfn-card.is-open .bfn-card__why { display: block; }

  /* The 3-slot meta reserve exists to align titles across a desktop ROW; on a
     single-column phone layout it's just dead space above every title. */
  .bfn-card__meta { min-height: 0; margin-bottom: 10px; }
  .bfn-card__title { font-size: 1.05rem; margin-bottom: 10px; }
}

.bfn-foot {
  padding: 34px clamp(20px, 6vw, 80px) 70px;
  border-top: 1px solid color-mix(in srgb, var(--sw-ink-soft) 14%, transparent);
  color: var(--bfn-muted); font-size: .82rem; line-height: 1.7;
  background: var(--sw-bg);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  align-items: baseline; justify-content: space-between;
}
.bfn-foot p { margin: 0; }
.bfn-foot__credit a {
  color: var(--sw-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--sw-ink-soft) 35%, transparent);
}
.bfn-foot__credit a:hover { color: var(--sw-accent); border-bottom-color: var(--sw-accent); }

@media (max-width: 640px) {
  .bfn-news-list { grid-template-columns: 1fr; }
  .bfn-card { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bfn-card { transition: none; }
  .bfn-card:hover { transform: none; }
}

/* ---- How the network works ----------------------------------------------
   Destination for the finale's secondary CTA. Numbered steps rather than
   prose: the mechanism is sequential, and the film already told it that way. */
.bfn-how {
  scroll-margin-top: 100px;
  padding: clamp(50px, 9vh, 90px) clamp(20px, 6vw, 80px) clamp(70px, 12vh, 130px);
  background: var(--sw-bg);
  border-top: 1px solid color-mix(in srgb, var(--sw-ink-soft) 11%, transparent);
}
.bfn-how__lede {
  max-width: 68ch;
  margin: 0 0 40px;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.62;
  color: var(--sw-ink-soft);
}

.bfn-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  counter-reset: step;
}
.bfn-step {
  padding: 26px 24px 28px;
  border: 1px solid color-mix(in srgb, var(--sw-ink-soft) 14%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bfn-surface) 45%, transparent);
}
.bfn-step__num {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--sw-accent);
  margin-bottom: 14px;
}
.bfn-step__title {
  font-family: "Space Grotesk", Sora, system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--sw-ink);
}
.bfn-step p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.62;
  color: var(--sw-ink-soft);
}
/* The last step is the harm, which is what the incident feed documents. */
.bfn-step:last-child {
  border-color: color-mix(in srgb, var(--bfn-alert) 34%, transparent);
}
.bfn-step:last-child .bfn-step__num { color: var(--bfn-alert); }

.bfn-how__foot { margin: 38px 0 0; }
.bfn-how__foot a {
  color: var(--sw-accent);
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--sw-accent) 40%, transparent);
}
.bfn-how__foot a:hover { border-bottom-color: var(--sw-accent); }

@media (max-width: 640px) {
  .bfn-steps { grid-template-columns: 1fr; }
}

/* ---- share (news cards) ---- */
.bfn-card__share {
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--sw-ink-soft) 25%, transparent);
  background: none; color: var(--sw-ink-soft);
  font: 600 .75rem/1 var(--sw-font-body, Inter, sans-serif);
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.bfn-card__share:hover { color: var(--sw-accent); border-color: var(--sw-accent); }
/* Card arrived via a shared link — make it findable at a glance. */
.bfn-card.is-shared { border-color: var(--sw-accent); }

/* ---- hub: site nav, buttons, events strip -------------------------------- */
/* Nav links live inside the engine's fixed topbar (injected by site.js), so
   the site has ONE persistent header. Hidden during the film — the scroll
   world's chrome stays exactly as designed — and revealed with site-open. */
.bfn-topnav {
  display: none;
  align-items: center; gap: 20px;
  margin-left: auto; margin-right: 18px;
}
body.site-open .bfn-topnav { display: flex; }
.bfn-topnav a {
  color: var(--sw-ink-soft); text-decoration: none;
  font: 600 .92rem/1 var(--sw-font-body, Inter, sans-serif);
}
.bfn-topnav a:hover { color: var(--sw-accent); }
@media (max-width: 640px) {
  .bfn-topnav { gap: 14px; margin-right: 10px; }
  .bfn-topnav a { font-size: .84rem; }
}

.bfn-btn {
  display: inline-block; padding: 11px 18px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--sw-ink-soft) 30%, transparent);
  color: var(--sw-ink); text-decoration: none; background: none; cursor: pointer;
  font: 600 .9rem/1 var(--sw-font-body, Inter, sans-serif);
  transition: border-color .2s, color .2s;
}
.bfn-btn:hover { border-color: var(--sw-accent); color: var(--sw-accent); }
.bfn-btn--primary {
  background: #D94A4A; border-color: #D94A4A; color: #08111F;
}
.bfn-btn--primary:hover { background: #E15C5C; border-color: #E15C5C; color: #08111F; }
.bfn-more-wrap {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 30px;
}

.bfn-events {
  scroll-margin-top: 100px;
  padding: 0 clamp(20px, 6vw, 80px) clamp(80px, 14vh, 160px);
  background: var(--sw-bg);
}
.bfn-events-strip { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.bfn-ev {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--sw-ink-soft) 16%, transparent);
  border-radius: 14px; text-decoration: none;
  background: color-mix(in srgb, var(--bfn-surface) 55%, transparent);
  transition: border-color .2s, transform .2s;
}
.bfn-ev:hover { border-color: color-mix(in srgb, var(--sw-accent) 40%, transparent); transform: translateY(-2px); }
.bfn-ev__date {
  flex: none; width: 56px; padding: 8px 0; text-align: center;
  border: 1px solid color-mix(in srgb, var(--sw-accent) 35%, transparent);
  border-radius: 10px; color: var(--sw-ink);
  font: 700 1.05rem/1.2 var(--sw-font-display, 'Space Grotesk', sans-serif);
}
.bfn-ev__date b {
  display: block; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sw-accent);
}
.bfn-ev__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bfn-ev__type {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bfn-alert, #D94A4A); font-weight: 700;
}
.bfn-ev__title { color: var(--sw-ink); font: 700 .98rem/1.35 var(--sw-font-display, 'Space Grotesk', sans-serif); }
.bfn-ev__meta { color: var(--bfn-muted); font-size: .8rem; }
.bfn-ev-empty { color: var(--bfn-muted); }
.bfn-ev-empty a { color: var(--sw-accent); }

@media (max-width: 900px) {
  .bfn-events-strip { grid-template-columns: 1fr; }
}

/* ---- support / donations ---- */
.bfn-support {
  padding: 0 clamp(20px, 6vw, 80px) clamp(80px, 14vh, 160px);
  background: var(--sw-bg);
  scroll-margin-top: 100px;
}

/* ---- footer nav (shared with events page's ev-foot) ---- */
.bfn-foot__nav { display: flex; gap: 22px; width: 100%; margin-bottom: 6px; }
.bfn-foot__nav a {
  color: var(--sw-ink-soft, #A8B6C5); text-decoration: none; font-weight: 600;
}
.bfn-foot__nav a:hover { color: var(--sw-accent, #2EC5FF); }

/* ---- Stay Informed band — its own piece, anchored above the footer ---- */
.bfn-stay {
  padding: clamp(44px, 7vh, 70px) clamp(20px, 6vw, 80px);
  border-top: 1px solid rgba(168, 182, 197, .14);
  text-align: center;
}
.bfn-stay .bfn-newsletter { margin: 0 auto; }
.bfn-stay .nlw-title {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin-bottom: 18px;
}
/* more breathing room between the paragraph and the form */
.bfn-stay .nlw-copy { margin: 0 auto 30px; }
.bfn-stay .nlw-row { justify-content: center; }
/* fine print centered under the form, with a little gap above it */
.bfn-stay .nlw-fine { text-align: center; margin-top: 16px; }

/* ---- homepage "Get involved" band: two CTA cards side by side ---- */
.bfn-involve {
  padding: 0 clamp(20px, 6vw, 80px) clamp(70px, 12vh, 140px);
  background: var(--sw-bg);
  scroll-margin-top: 100px;
}
.bfn-involve-grid {
  display: grid; gap: 20px; grid-template-columns: 1fr 1fr;
}
@media (max-width: 780px) { .bfn-involve-grid { grid-template-columns: 1fr; } }
.bfn-involve-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--sw-ink-soft) 16%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bfn-surface) 50%, transparent);
  scroll-margin-top: 100px;
}
.bfn-involve-card__title {
  font: 700 clamp(1.2rem, 2.2vw, 1.5rem)/1.2 var(--sw-font-display, "Space Grotesk", sans-serif);
  margin: 0 0 12px;
}
.bfn-involve-card__body {
  color: var(--sw-ink-soft); line-height: 1.65; margin: 0 0 22px; flex: 1;
}
/* cyan companion to the red donate button, so the two CTAs read distinctly */
.bfn-btn--accent {
  background: var(--sw-accent); border-color: var(--sw-accent); color: #08111F;
}
.bfn-btn--accent:hover {
  background: color-mix(in srgb, var(--sw-accent) 85%, #fff);
  border-color: color-mix(in srgb, var(--sw-accent) 85%, #fff);
  color: #08111F;
}
/* in-card donate button matches the accent button's size */
.bfn-involve-card .bfn-donate { padding: 11px 18px; font-size: .95rem; }

.bfn-involve-card__fine { color: var(--bfn-muted); font-size: .76rem; margin: 12px 0 0; }
.bfn-involve-card__fine a { color: var(--sw-ink-soft); }
.bfn-involve-card__fine a:hover { color: var(--sw-accent); }

/* Pointer from the curated feed to the full catalogue. */
.bfn-archive-link { color: var(--bfn-muted); font-size: .9rem; margin: -6px 0 18px; }
.bfn-archive-link a { color: var(--sw-accent); font-weight: 600; }

/* Per-state pointer into the archive. Sits under the state's write-ups and
   explains that they are a selection, not the whole record for that state. */
.sd-archive {
  /* .sd-list is an auto-fill grid, so an un-spanned paragraph becomes a
     sibling column and sits BESIDE the cards instead of under them. */
  grid-column: 1 / -1;
  color: var(--bfn-muted, #6F8193);
  font-size: .88rem;
  line-height: 1.5;
  margin: 12px 0 0;
}
.sd-archive b { color: var(--ink, #F5F8FC); font-weight: 600; }
.sd-archive a { color: var(--sw-accent, #2EC5FF); font-weight: 600; }

/* Footer social profiles. Icons only — the label lives in aria-label so a
   screen reader announces the network without the row looking cluttered. */
.bfn-social { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.bfn-social a {
  display: inline-flex; width: 22px; height: 22px;
  color: var(--bfn-muted, #6F8193);
  transition: color .15s, transform .15s;
}
.bfn-social a:hover, .bfn-social a:focus-visible {
  color: var(--sw-accent, #2EC5FF);
  transform: translateY(-1px);
}
.bfn-social svg { width: 100%; height: 100%; fill: currentColor; display: block; }


/* ---- footer layout ---------------------------------------------------------
   Two columns. The left one reads down: links, copyright, "Built by
   ByteBunny.io". The social profiles sit on the RIGHT, deliberately apart —
   stacked under the ByteBunny credit they read as ByteBunny's accounts rather
   than BlockFlockNow's, and proximity is what implies ownership.

   Grid rather than space-between, because the left column has to stack while
   the right stays beside it. */
.bfn-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 28px;
}
.bfn-foot__nav { grid-column: 1 / -1; }
.bfn-foot__legal { grid-column: 1; grid-row: 2; }
.bfn-foot__credit { grid-column: 1; grid-row: 3; margin-top: 2px; }
.bfn-foot .bfn-social {
  grid-column: 2; grid-row: 2 / span 2;
  align-self: center; margin-top: 0;
}

/* Events page carries its own footer class and puts both lines in one row. */
.ev-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 28px;
}
.ev-foot__nav, .ev-foot .bfn-foot__nav { grid-column: 1 / -1; }
.ev-foot__row { grid-column: 1; grid-row: 2; display: block; }
.ev-foot__row p { margin: 0; }
.ev-foot__row p + p { margin-top: 2px; }
.ev-foot .bfn-social {
  grid-column: 2; grid-row: 2;
  align-self: center; margin-top: 0;
}

/* Narrow screens: one column, profiles below with room to breathe. */
@media (max-width: 640px) {
  .bfn-foot, .ev-foot { grid-template-columns: 1fr; }
  .bfn-foot .bfn-social, .ev-foot .bfn-social {
    grid-column: 1; grid-row: auto; margin-top: 14px;
  }
}