/* ============================================================================
 * Selati Joy Drops — campaign map styles.
 * Ported from Claude Design "Joy Drop Map v4 (Sugar)".
 * Every rule is scoped under .sjd-campaign so it cannot leak into the theme.
 * Keyframes are global (harmless) and prefixed sjd- to avoid collisions.
 * ========================================================================== */

/* Brand fonts (self-hosted). Weight ranges map every body weight (≤700) to
   Semibold and every display weight (≥701) to Black, per the CI. */
@font-face {
  font-family: "Myriad Pro";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/myriadpro-semibold.woff2") format("woff2"),
       url("../fonts/myriadpro-semibold.woff") format("woff");
}
@font-face {
  font-family: "Myriad Pro";
  font-style: normal;
  font-weight: 701 900;
  font-display: swap;
  src: url("../fonts/myriadpro-black.woff2") format("woff2"),
       url("../fonts/myriadpro-black.woff") format("woff");
}

.sjd-campaign {
  --selati: #ce0e2d;
  --selati-dark: #a30b24;
  --selati-deep: #6b0417;
  --tint: #fbe8ec;
  --ink: #2b2725;
  --ink-soft: #6f6862;
  --kraft: #f7f0e6;
  --sand: #efe4d3;
  color: var(--ink);
  background: #fff;
  font-family: "Myriad Pro", "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}
.sjd-campaign * { box-sizing: border-box; }
/* Force the brand font inside the campaign — themes (e.g. Neve) set
   font-family directly on h1–h6/buttons, which would otherwise win. */
.sjd-campaign * { font-family: "Myriad Pro", "Segoe UI", system-ui, sans-serif !important; }
.sjd-campaign a { color: var(--selati); }
.sjd-campaign a:hover { color: var(--selati-dark); }
.sjd-campaign .shell { max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
/* Neve uppercases all headings; the design uses sentence case. */
.sjd-campaign h1, .sjd-campaign h2 { text-transform: none; }
/* ── THEME COMPATIBILITY ──────────────────────────────────────────────
   Themes style bare elements globally. selati.co.za (Divi + "Selati" child
   theme): h1-h3 font-family "Open Sans" + padding 10px + #333, h2 font-size
   2rem !important, body letter-spacing 1px, p padding-bottom 1em, and a
   footer:before artwork. Neve: uppercase headings, button padding. Reset all
   of it inside the campaign; class rules below still win (higher specificity),
   and the h2 sizes carry !important to beat the child theme's. */
.sjd-campaign { line-height: 1.5; letter-spacing: normal; text-align: left; }
.sjd-campaign h1, .sjd-campaign h2, .sjd-campaign h3 { font-family: inherit; padding: 0; color: var(--ink); }
.sjd-campaign p { padding: 0; }
.sjd-campaign footer::before, .sjd-campaign footer::after { content: none; display: none; }
/* Divi page chrome around the campaign page (body class from Compat): full
   width, no sidebar, no theme page title above our own hero. No-ops on Neve. */
body.sjd-campaign-page #main-content .container { width: 100%; max-width: none; padding-top: 0; }
body.sjd-campaign-page #main-content .container::before { display: none; }
body.sjd-campaign-page #left-area { width: 100%; float: none; margin: 0; padding: 0; }
body.sjd-campaign-page #sidebar { display: none; }
body.sjd-campaign-page #left-area > article { margin: 0; padding: 0; }
body.sjd-campaign-page .entry-title.main_title { display: none; }
/* The theme's back-to-top button (Neve #scroll-to-top, Divi .et_pb_scroll_top)
   is fixed bottom-right over the map's zoom buttons, story buttons and index
   rows, and is off-brand. The campaign page does without it. */
body.sjd-campaign-page #scroll-to-top,
body.sjd-campaign-page .et_pb_scroll_top { display: none !important; }
/* `hidden` must win over any display rule (ours or the theme's): the Stories /
   Wall sections and their controls rely on it until JS has data. */
.sjd-campaign [hidden] { display: none !important; }
/* Visually hidden, still read by screen readers. */
.sjd-campaign .sjd-vh { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* ── HERO: full-bleed red poster with sugar sprinkle ───────── */
/* Bottom padding always clears the 60px scalloped edge (::after), so the
   province chips never sit on the white arches. */
.sjd-campaign .hero { position: relative; color: #fff; overflow: hidden; padding-top: 22px; padding-bottom: clamp(72px, 8vw, 92px);
  background-color: var(--selati-deep);
  background-image: linear-gradient(rgba(206,14,45,.90), rgba(140,8,30,.94)); }
.sjd-campaign .hero.has-sugar { background-size: cover, 130%; background-position: center, center; }
.sjd-campaign .hero::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 60px; background: #fff;
  -webkit-mask: radial-gradient(28px 60px at 50% 100%, transparent 98%, #000 100%) repeat-x; mask: radial-gradient(28px 60px at 50% 100%, transparent 98%, #000 100%) repeat-x; -webkit-mask-size: 56px 60px; mask-size: 56px 60px; }
.sjd-campaign .sprinkles { position: absolute; inset: 0; pointer-events: none; }
.sjd-campaign .sprinkles i { position: absolute; top: -14px; width: 5px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.55); animation: sjd-fall linear infinite; }
@keyframes sjd-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(760px) rotate(340deg); opacity: 0; } }
.sjd-campaign .top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; z-index: 2; }
/* Logo: sized by HEIGHT (the production logo is a ~1.25:1 badge with its own
   white background), so the box grows to fit it instead of clipping it. */
.sjd-campaign .logo-wrap { flex: none; display: flex; align-items: center; min-width: 0; min-height: 44px; }
.sjd-campaign .logo-wrap img,
.sjd-campaign .logo-wrap .sjd-logo-img { display: block; height: 64px; width: auto; max-width: 180px; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; object-position: left center; }
.sjd-campaign .logo-text { font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: #fff; line-height: 1; white-space: nowrap; }
/* The solid-ish fill keeps falling sprinkles from merging into the text. */
.sjd-campaign .badge { display: inline-flex; align-items: center; gap: 8px; min-width: 0; background: rgba(120,6,26,.34); border: 1px solid rgba(255,255,255,.38); border-radius: 999px; padding: 7px 14px; font-size: 11.5px; font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sjd-campaign .badge b { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: sjd-blip 1.6s ease-in-out infinite; }
@keyframes sjd-blip { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
.sjd-campaign .hero-in { position: relative; z-index: 2; padding-top: clamp(28px, 5vw, 54px); display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: end; }
.sjd-campaign h1 { font-size: clamp(38px, 7.4vw, 92px); font-weight: 800; line-height: .96; letter-spacing: -.03em; margin: 0; text-wrap: balance; color: #fff; }
.sjd-campaign h1 span { display: block; }
.sjd-campaign h1 .out { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.85); }
.sjd-campaign .lede { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; margin: 0 0 4px; color: rgba(255,255,255,.92); max-width: 42ch; text-wrap: pretty; }

/* ── JOY METER ─────────────────────────────────────────────── */
/* The nine province chips ARE the meter: reached ones light up solid white,
   the rest stay outlined. (A continuous bar filled to 7/9 ran over FS and
   stopped short of MP, contradicting the chips, so it is not shown; the
   element stays for map.js.) */
.sjd-campaign .meter { position: relative; z-index: 2; margin-top: clamp(30px, 4.5vw, 46px); }
.sjd-campaign .meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.86); margin-bottom: 10px; }
.sjd-campaign .meter-bar { display: none; }
.sjd-campaign .meter-ticks { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin: 0; }
.sjd-campaign .meter-ticks i { font-style: normal; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; text-align: center; padding: 9px 2px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); color: rgba(255,255,255,.88); transition: background .35s ease, color .35s ease, box-shadow .35s ease; transition-delay: calc(var(--i, 0) * 70ms + .2s); }
.sjd-campaign .meter-ticks i.hit { background: #fff; box-shadow: inset 0 0 0 1px #fff, 0 2px 10px rgba(70,2,12,.25); color: var(--selati); }

/* ── COUNTERS ──────────────────────────────────────────────── */
.sjd-campaign .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 4px; border-bottom: 1px solid var(--sand); }
.sjd-campaign .stat { padding: 26px 8px 26px 0; }
.sjd-campaign .stat + .stat { padding-left: 26px; border-left: 1px solid var(--sand); }
.sjd-campaign .stat b { display: block; font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--selati); font-variant-numeric: tabular-nums; }
.sjd-campaign .stat span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }

/* ── MAP ───────────────────────────────────────────────────── */
/* .sjd-main is a plain div: the theme already provides the page's <main>. */
.sjd-campaign .sjd-main { padding-top: clamp(26px, 4vw, 44px); padding-bottom: 8px; }
.sjd-campaign .layout { display: grid; grid-template-columns: 1fr 316px; gap: 30px; align-items: start; }
.sjd-campaign .map-card { position: relative; border-radius: 28px; padding: clamp(10px, 2vw, 22px); overflow: hidden;
  background-color: #6d431f;
  background-image:
    radial-gradient(120% 90% at 22% 8%, rgba(255,230,190,.20) 0%, rgba(0,0,0,0) 55%),
    repeating-linear-gradient(96deg, rgba(60,32,12,.42) 0px, rgba(60,32,12,0) 3px, rgba(146,92,44,.26) 7px, rgba(60,32,12,0) 11px),
    repeating-linear-gradient(93deg, rgba(38,20,7,.30) 0px, rgba(38,20,7,0) 17px, rgba(122,74,31,.22) 31px, rgba(38,20,7,0) 46px),
    linear-gradient(160deg, #7c4d24 0%, #5e3718 58%, #48280f 100%); }
.sjd-campaign .map-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(115% 100% at 50% 40%, rgba(255,240,214,.12) 0%, rgba(30,15,5,.16) 72%, rgba(30,15,5,.46) 100%); }
.sjd-campaign .map-stage { position: relative; }
.sjd-campaign #map { display: block; width: 100%; height: auto; position: relative; z-index: 1; touch-action: pan-y; cursor: grab; }
.sjd-campaign #map.dragging { cursor: grabbing; }
.sjd-campaign .zoom-ctl { position: absolute; right: clamp(14px, 2.4vw, 26px); bottom: clamp(14px, 2.4vw, 26px); z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.sjd-campaign .zoom-ctl button { width: 44px; height: 44px; min-width: 0; min-height: 0; margin: 0; padding: 0; text-transform: none; letter-spacing: 0; border: 0; border-radius: 14px; background: #fff; color: var(--ink); font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(43,39,37,.14); display: grid; place-items: center; }
.sjd-campaign .zoom-ctl button:hover { background: var(--tint); color: var(--selati-dark); }
.sjd-campaign .zoom-ctl button:active { background: var(--selati); color: #fff; }
.sjd-campaign .zoom-ctl button:focus-visible { outline: 2px solid var(--selati); outline-offset: 2px; }
.sjd-campaign .zoom-ctl button.reset { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sjd-campaign .map-hint { position: absolute; left: clamp(14px, 2.4vw, 26px); bottom: clamp(14px, 2.4vw, 26px); z-index: 4; max-width: calc(100% - 120px); font-size: 11px; font-weight: 600; line-height: 1.3; color: #6b5c46; background: rgba(255,255,255,.94); border-radius: 999px; padding: 7px 13px; box-shadow: 0 2px 10px rgba(43,39,37,.16); transition: opacity .3s, box-shadow .3s, color .3s; pointer-events: none; }
/* Nudge (map.js: a gesture the map ignores, e.g. one-finger drag or a plain
   wheel): the hint comes back fully, whatever opacity it was faded to. */
.sjd-campaign #map-hint.is-nudge { opacity: 1 !important; visibility: visible !important; color: var(--selati-dark); box-shadow: 0 0 0 2px var(--selati), 0 4px 14px rgba(43,39,37,.24); }
/* Legend, in the top-left corner: that corner is Namibia / Botswana (bare
   wood), so it covers no dots and no province (top-right is Limpopo). Not
   interactive, so drags pass through; the comment callouts steer clear. */
.sjd-campaign .map-keys { position: absolute; left: clamp(16px, 2.6vw, 30px); top: clamp(16px, 2.6vw, 30px); z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: calc(100% - 32px); pointer-events: none; }
.sjd-campaign .legend { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.sjd-campaign .legend div { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--ink); background: rgba(255,255,255,.94); border-radius: 999px; padding: 6px 12px; }
.sjd-campaign .legend i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--selati); }
.sjd-campaign .legend i.faint { background: rgba(206,14,45,.38); }
.sjd-campaign .legend [hidden] { display: none; }
.sjd-campaign .map-credit { font-size: 11px; color: var(--ink-soft); margin: 12px 4px 0; }

/* ── INDEX ─────────────────────────────────────────────────── */
.sjd-campaign #list { scrollbar-width: thin; scrollbar-color: var(--sand) transparent; }
.sjd-campaign #list::-webkit-scrollbar { width: 8px; }
.sjd-campaign #list::-webkit-scrollbar-track { background: transparent; }
.sjd-campaign #list::-webkit-scrollbar-thumb { background: #d9c7a8; border-radius: 999px; }
.sjd-campaign #list::-webkit-scrollbar-thumb:hover { background: #c9b28c; }
.sjd-campaign .index h2 { font-size: 19px !important; font-weight: 700; margin: 2px 0 4px; letter-spacing: -.01em; }
.sjd-campaign .index .sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 4px; }
/* Province accordion header: h3.sjd-prov-h > button.prov-toggle (the older
   h3.prov-toggle markup gets the same look). The whole 44px-tall row is the
   tap target; every theme button style is reset (Neve: padding, colours,
   uppercase, hover backgrounds; Divi: heading padding / font). */
.sjd-campaign .sjd-prov-h { margin: 0; padding: 0; border: 0; font-size: inherit; font-weight: inherit; line-height: 1; letter-spacing: 0; text-transform: none; color: inherit; }
.sjd-campaign .prov-toggle,
.sjd-campaign button.prov-toggle { -webkit-appearance: none; appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 12px 2px 4px; border: 0; border-radius: 6px; background: none; box-shadow: none; text-shadow: none; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; text-decoration: none; line-height: 1.3; color: var(--selati); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.sjd-campaign .prov-toggle:hover,
.sjd-campaign .prov-toggle:focus,
.sjd-campaign .prov-toggle:active { background: none; box-shadow: none; color: var(--selati-dark); text-decoration: none; }
.sjd-campaign .prov-toggle .pl { flex: none; }
.sjd-campaign .prov-toggle .rule { flex: 1; height: 1px; background: var(--sand); }
.sjd-campaign .prov-toggle .chev { width: 12px; height: 12px; flex: none; }
.sjd-campaign .prov-toggle .chev::before { content: ""; display: block; width: 6px; height: 6px; margin: 1px auto 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; }
.sjd-campaign .prov-group.open .prov-toggle .chev::before { transform: rotate(-135deg); margin-top: 4px; }
.sjd-campaign .prov-toggle:focus { outline: none; }
.sjd-campaign .prov-toggle:focus-visible { outline: 2px solid var(--selati); outline-offset: 2px; border-radius: 6px; }
/* A collapsed group's rows are also visibility:hidden (after the slide), so
   they leave the tab order and the accessibility tree, matching aria-expanded. */
.sjd-campaign .prov-rows { max-height: 1200px; overflow: hidden; visibility: visible; transition: max-height .32s ease, visibility 0s linear 0s; }
.sjd-campaign .prov-group:not(.open) .prov-rows { max-height: 0; visibility: hidden; transition: max-height .32s ease, visibility 0s linear .32s; }
.sjd-campaign .prov-rows-inner { min-height: 0; }
.sjd-campaign .row { display: flex; margin: 0; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; border-radius: 12px; cursor: pointer; transition: background .18s, transform .18s; }
.sjd-campaign .row:hover, .sjd-campaign .row.active { background: var(--tint); transform: translateX(3px); }
/* a drop without coordinates still opens its card, but has no dot to find */
.sjd-campaign .row.is-nopin:hover, .sjd-campaign .row.is-nopin.active { transform: none; }
/* rows are role="button" (Enter / Space opens the card): inset ring, as the
   list scrolls with overflow hidden on desktop */
.sjd-campaign .row:focus { outline: none; }
.sjd-campaign .row:focus-visible { outline: 2px solid var(--selati); outline-offset: -2px; background: var(--tint); }
/* each row starts with its map dot (no numbers): a drop's is solid, a
   shared comment's has the map's thin white ring, "on its way" is faint */
.sjd-campaign .row .row-dot { flex: none; width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: var(--selati); }
.sjd-campaign .row.is-note .row-dot { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(206,14,45,.45); }
.sjd-campaign .row.is-spreading .row-dot { background: rgba(206,14,45,.38); }
.sjd-campaign .row.is-nopin .row-dot { background: none; box-shadow: inset 0 0 0 1.5px rgba(206,14,45,.5); }
.sjd-campaign .row .nm { font-size: 14px; font-weight: 600; line-height: 1.3; flex: 1; min-width: 0; }
.sjd-campaign .row .ct { font-size: 11.5px; color: var(--ink-soft); }
/* a shared comment: place left, "@handle" right (long handles wrap) */
.sjd-campaign .row.is-note .ct { flex: 0 1 auto; max-width: 48%; min-width: 0; text-align: right; font-weight: 700; color: var(--selati-dark); overflow-wrap: anywhere; }
/* "Joy on its way" drops: a faint dot + a dashed pill */
.sjd-campaign .sjd-spread-pill { display: inline-block; margin: 0 0 0 6px; padding: 3px 8px; border: 1px dashed rgba(206,14,45,.5); border-radius: 999px; background: #fff; color: var(--selati-dark); font-size: 9.5px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; vertical-align: 2px; }

/* ── LOADING PLACEHOLDERS ──────────────────────────────────── */
/* The shortcode prints .sjd-campaign.is-loading; map.js removes the class
   once the drops are in. Until then the counters, the lede count and the
   meter label show soft sand bars instead of "0", and the index keeps the
   space its province headers will take, so nothing jumps when data lands.
   The shimmer stops under reduced motion (see the end of the file). */
@keyframes sjd-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sjd-campaign .sjd-skel,
.sjd-campaign.is-loading .stat b {
  background-color: #f3eadc;
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: sjd-shimmer 1.4s ease-in-out infinite; }
/* same 1em box as the number (no shift), drawn a little slimmer */
.sjd-campaign.is-loading .stat b { width: 1.9em; max-width: 100%; height: .8em; margin: .1em 0; border-radius: 12px; color: transparent; }
.sjd-campaign.is-loading .stat b[data-suffix] { width: 2.4em; }
/* on the red hero: translucent white bars (padding only, so the line
   height does not change when the number arrives) */
.sjd-campaign.is-loading #lede-count,
.sjd-campaign.is-loading #meter-label { border-radius: 6px; color: transparent; background: rgba(255,255,255,.26); animation: sjd-pulse 1.4s ease-in-out infinite; }
.sjd-campaign.is-loading #lede-count { padding: 0 .4em; }
.sjd-campaign.is-loading #meter-label { min-width: 9.5em; }
@keyframes sjd-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* Index: until map.js fills #list, reserve the room of the province headers
   (collapsed 44px rows on phones; the column beside the map on desktop) and
   sketch them as sand bars. */
.sjd-campaign #list:empty { min-height: 308px; }
.sjd-campaign #list:empty::before { content: ""; display: block; height: 308px;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 20px, #f1e7d8 20px 32px, transparent 32px 44px),
    repeating-linear-gradient(180deg, transparent 0 25.5px, var(--sand) 25.5px 26.5px, transparent 26.5px 44px);
  background-size: 42% 100%, 52% 100%; background-position: left top, right top; background-repeat: no-repeat; }
.sjd-campaign.is-loading #list:empty::before { animation: sjd-pulse 1.4s ease-in-out infinite; }

/* ── BRAND SURFACES (no-photo map strip + story tiles) ─────── */
/* Sugar texture under a Selati-red wash. --sjd-sugar is set by map.js on the
   campaign root (the light sugar-sm.jpg); without it the wash sits on sand.
   A soft scrim at the foot keeps white type well above 4.5:1. */
.sjd-campaign .sjd-brand-fill { position: relative; overflow: hidden; color: #fff;
  background-color: var(--sand);
  background-image: linear-gradient(rgba(206,14,45,.50), rgba(110,4,20,.72)), var(--sjd-sugar, none);
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.sjd-campaign .sjd-brand-fill::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; pointer-events: none;
  background: linear-gradient(rgba(70,2,12,0), rgba(70,2,12,.34)); }
.sjd-campaign .sjd-brand-tag { position: relative; z-index: 1; display: inline-block; margin: 0; padding: 5px 10px; border-radius: 999px; background: rgba(107,4,23,.62); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: none; white-space: nowrap; }
.sjd-campaign .sjd-brand-big { position: relative; z-index: 1; display: block; max-width: 100%; margin: 0; color: #fff; font-size: 30px; font-weight: 900; line-height: .95; letter-spacing: -.02em; text-transform: none; overflow-wrap: anywhere; text-shadow: 0 2px 14px rgba(70,2,12,.5), 0 1px 2px rgba(70,2,12,.45); }
.sjd-campaign .sjd-brand-big.is-mid { font-size: 25px; }
.sjd-campaign .sjd-brand-big.is-long { font-size: 21px; line-height: 1; }

/* ── STORY CARD ────────────────────────────────────────────── */
.sjd-campaign #tip { position: absolute; display: none; width: 270px; background: #fff; border-radius: 18px; padding: 0; z-index: 8; box-shadow: 0 14px 36px rgba(43,39,37,.2); overflow: hidden; }
/* The card is a dialog that takes focus itself only on touch / screen-reader
   taps (keyboard opens focus its close button), so it never needs a ring of
   its own; WebKit drew one after a tap on a dot or callout (not focusable). */
.sjd-campaign #tip:focus,
.sjd-campaign #tip:focus-visible { outline: none; }
/* Photo strip: always rendered (story photo, local story photo, drop photo,
   else the branded sugar strip). Photos are set inline by map.js. */
.sjd-campaign #tip .tphoto { position: relative; height: 120px; background-color: var(--sand); background-size: cover; background-position: center; background-repeat: no-repeat; }
.sjd-campaign #tip .tphoto.sjd-tphoto-brand { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 12px 17px 13px; }
.sjd-campaign #tip .sjd-tphoto-brand .sjd-brand-tag { position: absolute; left: 12px; top: 12px; }
.sjd-campaign #tip.compact .tphoto { display: none; }
.sjd-campaign #tip.compact .tbody { padding-top: 34px; }
.sjd-campaign #tip .tbody { padding: 14px 17px 17px; }
.sjd-campaign #tip .tk { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--selati); margin: 0 0 3px; }
.sjd-campaign #tip.is-spreading .tk { color: var(--selati-dark); }
.sjd-campaign #tip .tt { font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
.sjd-campaign #tip .tb { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 13px; }
.sjd-campaign #tip .sjd-tby { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--selati-dark); margin: -2px 0 6px; overflow-wrap: anywhere; }
/* a shared comment's card: the handle links to the post, the words lead */
.sjd-campaign #tip .sjd-tby a { color: inherit; text-decoration: none; }
.sjd-campaign #tip .sjd-tby a:hover,
.sjd-campaign #tip .sjd-tby a:focus { color: var(--selati); text-decoration: underline; text-underline-offset: 2px; }
.sjd-campaign #tip .sjd-tby a:focus-visible { outline: 2px solid var(--selati); outline-offset: 2px; border-radius: 4px; }
.sjd-campaign #tip .tb.sjd-tnote { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
/* "Joy from <City>": a same-city creator story, labelled as such */
.sjd-campaign #tip .sjd-tfrom { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 0 0 9px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--tint); color: var(--selati-dark); font-size: 11.5px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }
.sjd-campaign #tip .sjd-tfrom + .sjd-tby { margin-top: 0; }
/* "A creator's story from <City>, not from this exact spot." under the pill */
.sjd-campaign #tip .sjd-tad.sjd-tctx { margin: -2px 0 8px; }
.sjd-campaign #tip .sjd-tctx + .sjd-tby { margin-top: 0; }
/* no story yet: where joy landed, then a line in Selati's own words */
.sjd-campaign #tip .tb.sjd-tlanded { margin-bottom: 8px; }
.sjd-campaign #tip .sjd-tline { margin: 0 0 14px; padding: 1px 0 1px 11px; border-left: 3px solid var(--selati); font-size: 16px; font-weight: 900; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
/* paid-partnership disclosure under a creator's story (the stories_note) */
.sjd-campaign #tip .sjd-tad { margin: 12px 0 0; padding: 0; font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--ink-soft); }
.sjd-campaign #tip .tbody > :last-child { margin-bottom: 0; }
.sjd-campaign #tip .tl { display: inline-block; background: var(--selati); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-decoration: none; padding: 10px 18px; border-radius: 999px; transition: background .18s, transform .18s; }
.sjd-campaign #tip .tl:hover, .sjd-campaign #tip .tl:focus { background: var(--selati-dark); color: #fff; text-decoration: none; }
.sjd-campaign #tip .tl:active { transform: translateY(1px); }
.sjd-campaign #tip .tl:focus-visible { outline: 2px solid var(--selati); outline-offset: 2px; }
/* Close button: fully reset against theme button styles (Neve adds 13px/15px
   padding), and draw the × with two bars so it's centred regardless of font. */
.sjd-campaign #tip .tclose { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(43,39,37,.18); font-size: 0; line-height: 0; color: var(--ink); cursor: pointer; }
.sjd-campaign #tip .tclose::before,
.sjd-campaign #tip .tclose::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; border-radius: 2px; background: currentColor; }
.sjd-campaign #tip .tclose::before { transform: translate(-50%, -50%) rotate(45deg); }
.sjd-campaign #tip .tclose::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sjd-campaign #tip .tclose:hover { background: var(--tint); color: var(--selati-dark); }
.sjd-campaign #tip .tclose:focus-visible { outline: 2px solid var(--selati); outline-offset: 2px; }
/* Several dots under one tap (within ~12px on screen): #tip.is-list lists
   their places under a short brand strip; each row opens that place's card.
   44px rows, every theme list / button style reset (Divi: #left-area ul
   padding + discs). */
.sjd-campaign #tip.is-list .tphoto { height: 84px; }
.sjd-campaign #tip ul.sjd-tlist { list-style: none; margin: 2px 0 0; padding: 0; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--sand); }
.sjd-campaign #tip ul.sjd-tlist > li { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--sand); line-height: 1.3; }
.sjd-campaign #tip ul.sjd-tlist > li::before,
.sjd-campaign #tip ul.sjd-tlist > li::marker { content: none; display: none; }
.sjd-campaign #tip button.sjd-tlist-item { -webkit-appearance: none; appearance: none; position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px 26px 8px 6px; border: 0; border-radius: 10px; background: none; box-shadow: none; text-shadow: none; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; text-align: left; text-decoration: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s, color .18s; }
.sjd-campaign #tip button.sjd-tlist-item::after { content: ""; position: absolute; right: 10px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--selati); border-bottom: 2px solid var(--selati); transform: rotate(-45deg); }
.sjd-campaign #tip button.sjd-tlist-item:hover,
.sjd-campaign #tip button.sjd-tlist-item:focus { background: var(--tint); color: var(--selati-dark); box-shadow: none; outline: none; }
.sjd-campaign #tip button.sjd-tlist-item:focus-visible { outline: 2px solid var(--selati); outline-offset: -2px; }
/* "Lonehill" then the city (a <span>), pushed to the right; a shared
   comment: its place, then "@handle" */
.sjd-campaign #tip .sjd-tlist-item > span { flex: none; max-width: 45%; margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sjd-campaign #tip .sjd-tlist-item.is-note > span { font-weight: 700; color: var(--selati-dark); }

/* Backdrop behind the phone / tablet bottom sheet (map.js shows it with the
   sheet; it may live in the campaign or in <body>). Never shown on desktop,
   where the card is a popover beside its pin. */
.sjd-sheet-backdrop { display: none; }
@keyframes sjd-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── SECTION HEADS (Joy Stories, Joy Wall) ─────────────────── */
.sjd-campaign .sjd-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: end; margin: 0 0 18px; }
.sjd-campaign .sjd-sec-head > h2,
.sjd-campaign .sjd-sec-head > p { grid-column: 1; }
.sjd-campaign .sjd-sec-head h2 { margin: 0 0 6px; padding: 0; font-size: clamp(24px, 3.4vw, 36px) !important; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-transform: none; color: var(--ink); text-wrap: balance; }
.sjd-campaign .sjd-sec-head p { margin: 0; padding: 0; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); }
/* ad disclosure under the Joy Stories heading */
.sjd-campaign .sjd-sec-head p.sjd-sec-note { margin-top: 6px; font-size: 12.5px; line-height: 1.45; }
.sjd-campaign .sjd-sec-head > .sjd-nav,
.sjd-campaign .sjd-sec-head > .sjd-wall-toggle { grid-column: 2; grid-row: 1 / span 2; align-self: end; }

/* Round track controls (prev / next, wall pause). Fully reset against theme
   button styles (Neve: padding 13px 15px, colours, uppercase, shadows). */
.sjd-campaign .sjd-nav { display: flex; gap: 8px; }
.sjd-campaign .sjd-ctl { -webkit-appearance: none; appearance: none; position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--sand); border-radius: 999px; background: #fff; color: var(--ink); box-shadow: none; text-shadow: none; font-size: 0; font-weight: 700; line-height: 0; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s, opacity .18s; }
.sjd-campaign .sjd-ctl::before { content: ""; display: block; width: 9px; height: 9px; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.sjd-campaign .sjd-prev::before { transform: translateX(2px) rotate(135deg); }
.sjd-campaign .sjd-next::before { transform: translateX(-2px) rotate(-45deg); }
/* Ends of the track use aria-disabled (stays focusable), not :disabled. */
.sjd-campaign .sjd-ctl:hover:not([aria-disabled="true"]),
.sjd-campaign .sjd-ctl:focus:not([aria-disabled="true"]) { background: var(--tint); border-color: var(--tint); color: var(--selati-dark); }
.sjd-campaign .sjd-ctl:focus { outline: none; }
.sjd-campaign .sjd-ctl:focus-visible { outline: 2px solid var(--selati); outline-offset: 2px; }
.sjd-campaign .sjd-ctl[aria-disabled="true"] { opacity: .35; cursor: default; background: #fff; color: var(--ink); }

/* ── JOY STORIES ───────────────────────────────────────────── */
.sjd-campaign .sjd-stories { margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; }
.sjd-campaign .sjd-story-track { display: grid; grid-auto-flow: column; grid-auto-columns: 272px; gap: 18px; align-items: stretch; margin: 0 -4px; padding: 4px 4px 18px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--sand) transparent; }
/* Tracks are focusable (tabindex=0) so keyboard users can scroll cards that
   have no links; inset outline, as the tracks bleed to the edges on phones. */
.sjd-campaign .sjd-story-track:focus,
.sjd-campaign .sjd-note-track:focus { outline: none; }
.sjd-campaign .sjd-story-track:focus-visible,
.sjd-campaign .sjd-note-track:focus-visible { outline: 2px solid var(--selati); outline-offset: -2px; }
.sjd-campaign .sjd-story-track::-webkit-scrollbar,
.sjd-campaign .sjd-note-track::-webkit-scrollbar { height: 8px; }
.sjd-campaign .sjd-story-track::-webkit-scrollbar-track,
.sjd-campaign .sjd-note-track::-webkit-scrollbar-track { background: transparent; }
.sjd-campaign .sjd-story-track::-webkit-scrollbar-thumb,
.sjd-campaign .sjd-note-track::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 999px; }
/* position:relative on cards keeps their .sjd-vh spans inside the scroll
   container; otherwise off-screen cards widen the whole document. */
.sjd-campaign .sjd-story { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; margin: 0; background: #fff; border: 1px solid var(--sand); border-radius: 22px; overflow: hidden; box-shadow: 0 6px 22px rgba(43,39,37,.06); transition: box-shadow .25s ease, border-color .25s ease; }
.sjd-campaign .sjd-story:hover,
.sjd-campaign .sjd-story:focus-within { border-color: #e6d6bd; box-shadow: 0 10px 28px rgba(43,39,37,.11); }
/* Every tile has an image: the post's cover (4:5, like Instagram) or a
   branded sugar tile with the creator's handle. */
/* While a photo lazy-loads, its frame shows the sugar texture under a sand
   veil rather than an empty block (--sjd-sugar comes from map.js). */
.sjd-campaign .sjd-story-media { position: relative; aspect-ratio: 4 / 5; margin: 0; overflow: hidden;
  background-color: var(--sand);
  background-image: linear-gradient(rgba(239,228,211,.62), rgba(239,228,211,.78)), var(--sjd-sugar, none);
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.sjd-campaign .sjd-story-media img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.sjd-campaign .sjd-story:hover .sjd-story-media img { transform: scale(1.035); }
.sjd-campaign .sjd-story-media--brand .sjd-brand-fill { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px; padding: 20px 20px 22px; }
.sjd-campaign .sjd-story-media--brand .sjd-brand-tag { padding: 0; background: none; font-size: 12px; letter-spacing: .06em; text-shadow: 0 1px 6px rgba(70,2,12,.5); }
.sjd-campaign .sjd-story-media--brand .sjd-brand-big { font-size: 34px; }
.sjd-campaign .sjd-story-media--brand .sjd-brand-big.is-mid { font-size: 28px; }
.sjd-campaign .sjd-story-media--brand .sjd-brand-big.is-long { font-size: 23px; }
/* "📍 City": where the creator is based (city-level evidence) */
.sjd-campaign .sjd-story-city { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-block; max-width: calc(100% - 24px); margin: 0; padding: 6px 11px 6px 9px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 11.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 10px rgba(43,39,37,.16); }
.sjd-campaign .sjd-story-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; padding: 18px 20px 20px; }
.sjd-campaign .sjd-chip { display: inline-block; max-width: 100%; margin: 0 0 12px; padding: 6px 11px; border-radius: 999px; background: var(--tint); color: var(--selati); font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tiles share the tallest tile's height. Title (2 lines) and quote (5 lines,
   enough for the 160-character pull-quote) are capped, and the handle +
   button sit together as a footer pinned to the bottom behind a hairline,
   so a short quote leaves a calm gap above the footer instead of a hole
   between the handle and the button. */
.sjd-campaign .sjd-story-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; align-self: stretch; margin: 0 0 8px; padding: 0; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: var(--ink); overflow-wrap: anywhere; }
.sjd-campaign .sjd-story-quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; align-self: stretch; margin: 0 0 14px; padding: 0; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.sjd-campaign .sjd-story-by { align-self: stretch; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid var(--sand); font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--selati-dark); overflow-wrap: anywhere; }
/* no visible handle (none, or screen-reader only on a branded tile whose
   picture already shows it): the button row is the pinned footer */
.sjd-campaign .sjd-story-cta { align-self: stretch; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--sand); line-height: 1; }
.sjd-campaign .sjd-story-by:not(.sjd-vh) + .sjd-story-cta { margin-top: 0; padding-top: 12px; border-top: 0; }
.sjd-campaign .sjd-story a.sjd-story-link { display: inline-block; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--selati); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: none; }
.sjd-campaign .sjd-story a.sjd-story-link:hover,
.sjd-campaign .sjd-story a.sjd-story-link:focus { background: var(--selati-dark); color: #fff; text-decoration: none; }
.sjd-campaign .sjd-story a.sjd-story-link:focus-visible { outline: 2px solid var(--selati); outline-offset: 2px; }
/* Placeholder tiles (printed by the shortcode, replaced by map.js): same
   width, 4:5 frame and body height as a real tile, in shimmering sand. */
.sjd-campaign .sjd-story-skel { box-shadow: none; pointer-events: none; }
.sjd-campaign .sjd-story-skel .sjd-story-media { background-image: none; background-color: #f3eadc; }
/* map.js may print bare placeholder tiles (empty divs): draw the 4:5 frame
   and the body from pseudo-elements */
.sjd-campaign .sjd-story-skel:empty::before { content: ""; display: block; aspect-ratio: 4 / 5; background-color: #f3eadc;
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%; background-repeat: no-repeat; animation: sjd-shimmer 1.4s ease-in-out infinite; }
.sjd-campaign .sjd-story-skel:empty::after { content: ""; display: block; height: 250px; margin: 0 20px;
  background-image: linear-gradient(#f3eadc, #f3eadc), linear-gradient(#f3eadc, #f3eadc), linear-gradient(#f3eadc, #f3eadc), linear-gradient(#f3eadc, #f3eadc), linear-gradient(#f3eadc, #f3eadc);
  background-size: 38% 22px, 82% 18px, 100% 12px, 64% 12px, 56% 40px; background-position: 0 18px, 0 52px, 0 84px, 0 106px, 0 190px; background-repeat: no-repeat; }
.sjd-campaign .sjd-story-skel .sjd-story-media::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%; background-repeat: no-repeat; animation: sjd-shimmer 1.4s ease-in-out infinite; }
.sjd-campaign .sjd-story-skel .sjd-story-body { gap: 10px; min-height: 250px; }
.sjd-campaign .sjd-skel { display: block; height: 12px; border-radius: 999px; }
.sjd-campaign .sjd-skel--chip { width: 38%; height: 22px; margin-bottom: 2px; }
.sjd-campaign .sjd-skel--title { width: 82%; height: 18px; margin-bottom: 4px; }
.sjd-campaign .sjd-skel--line { width: 100%; }
.sjd-campaign .sjd-skel--short { width: 64%; }
.sjd-campaign .sjd-skel--btn { width: 56%; height: 40px; margin-top: auto; }

/* ── JOY WALL ──────────────────────────────────────────────── */
.sjd-campaign .sjd-wall { position: relative; margin: clamp(30px, 4.5vw, 52px) 0 0; padding: clamp(26px, 4vw, 44px) 0 clamp(18px, 3vw, 30px); background: var(--kraft); border-radius: 28px; overflow: hidden; }
.sjd-campaign .sjd-wall .sjd-sec-head { padding: 0 clamp(22px, 4vw, 44px); }
.sjd-campaign .sjd-note-track { position: relative; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(22px, 4vw, 44px); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #e0cfb2 transparent; }
.sjd-campaign .sjd-note-lane { display: flex; align-items: stretch; gap: 14px; width: max-content; margin: 0; padding: 6px clamp(22px, 4vw, 44px) 16px; }
.sjd-campaign .sjd-note { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; width: 272px; margin: 0; padding: 16px 20px 18px; scroll-snap-align: start; background: #fff; border-radius: 20px; box-shadow: 0 4px 16px rgba(84,48,18,.08); }
.sjd-campaign .sjd-note--b { background: var(--tint); }
.sjd-campaign .sjd-note::before { content: "\201C"; content: "\201C" / ""; display: block; height: 22px; margin: 0 0 6px; font-size: 46px; font-weight: 800; line-height: .9; color: var(--selati); }
.sjd-campaign .sjd-note-text { margin: 0 0 14px; padding: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.sjd-campaign .sjd-note-by { margin: auto 0 0; padding: 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--selati-dark); overflow-wrap: anywhere; }
.sjd-campaign .sjd-note-by a.sjd-note-name { color: var(--selati-dark); text-decoration: none; }
.sjd-campaign .sjd-note-by a.sjd-note-name:hover,
.sjd-campaign .sjd-note-by a.sjd-note-name:focus { color: var(--selati); text-decoration: underline; text-underline-offset: 2px; }
.sjd-campaign .sjd-note-by a.sjd-note-name:focus-visible { outline: 2px solid var(--selati); outline-offset: 2px; border-radius: 4px; }
/* Auto-scroll (JS adds .is-marquee only for fine pointers, without reduced
   motion, when the notes overflow). Pauses on hover, focus or the button. */
.sjd-campaign .sjd-note-track.is-marquee { overflow: hidden; scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.sjd-campaign .sjd-note-track.is-marquee .sjd-note-lane { animation: sjd-marquee var(--sjd-dur, 60s) linear infinite; will-change: transform; }
.sjd-campaign .sjd-note-track.is-marquee:hover .sjd-note-lane,
.sjd-campaign .sjd-note-track.is-marquee:focus-within .sjd-note-lane,
.sjd-campaign .sjd-note-track.is-paused .sjd-note-lane { animation-play-state: paused; }
@keyframes sjd-marquee { from { transform: translateX(0); } to { transform: translateX(var(--sjd-shift, -50%)); } }
.sjd-campaign .sjd-wall-toggle { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 38px; padding: 0 16px 0 14px; font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sjd-campaign .sjd-wall-toggle::before { width: 8px; height: 10px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; transform: none; }
.sjd-campaign .sjd-wall-toggle.is-play::before { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }

/* ── CLOSE ─────────────────────────────────────────────────── */
.sjd-campaign .banner { position: relative; overflow: hidden; background: var(--selati); border-radius: 28px; color: #fff; padding: clamp(30px, 5vw, 54px) clamp(24px, 4vw, 48px); margin: clamp(28px, 4vw, 44px) 0 30px; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; }
.sjd-campaign .banner h2 { font-size: clamp(24px, 3.6vw, 38px) !important; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 8px; color: #fff; text-wrap: balance; }
.sjd-campaign .banner p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.9); }
.sjd-campaign .sjd-banner-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sjd-campaign .banner .cta { display: inline-block; background: #fff; color: var(--selati); font-size: 13.5px; font-weight: 700; text-decoration: none; padding: 14px 26px; border-radius: 999px; white-space: nowrap; }
.sjd-campaign .banner .cta:hover { background: var(--tint); color: var(--selati-dark); }
.sjd-campaign .banner .cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sjd-campaign .banner a.sjd-banner-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: 3px; white-space: nowrap; }
.sjd-campaign .banner a.sjd-banner-tag:hover,
.sjd-campaign .banner a.sjd-banner-tag:focus { color: #fff; text-decoration-color: #fff; }
.sjd-campaign .banner a.sjd-banner-tag:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.sjd-campaign footer { position: relative; text-align: center; font-size: 12.5px; color: var(--ink-soft); padding-bottom: 40px; }
.sjd-campaign footer a.sjd-footer-ig { color: var(--selati); font-weight: 700; text-decoration: none; }
.sjd-campaign footer a.sjd-footer-ig:hover,
.sjd-campaign footer a.sjd-footer-ig:focus { color: var(--selati-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ── MAP DOTS, NETWORK + CALLOUTS (the reel) ───────────────── */
/* Small red dots, one per place (no counts, no clusters). Radius and stroke
   widths are set by map.js, so they stay the same on screen at every zoom.
   A shared comment's dot has a thin white ring; transforms (the intro pop,
   the pulse, the highlight) scale each dot about its own centre. */
.sjd-campaign .pin-hit { cursor: pointer; }
.sjd-campaign .pin-dot { fill: var(--selati); stroke: rgba(107,4,23,.4); transform-box: fill-box; transform-origin: center; transition: opacity .2s ease; }
.sjd-campaign .pin-g.is-note .pin-dot { stroke: #fff; }
/* before the intro reaches it (map.js draws them in landing order) */
.sjd-campaign .pin-g.is-pre .pin-dot,
.sjd-campaign .pin-g.is-pre .pin-ring { opacity: 0; }
/* the pulse ring of a comment's dot (Web Animations scale + fade it when
   its callout pops); a featured dot keeps a faint ring while its card shows */
.sjd-campaign .pin-ring { fill: none; stroke: var(--selati); opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.sjd-campaign .pin-g.is-live .pin-ring { opacity: .5; }
.sjd-campaign .pin-g.dim .pin-dot { opacity: .35; }
.sjd-campaign .pin-g.hi .pin-dot { transform: scale(1.5); }
/* "Joy on its way": a faint dot (CSS beats the fill presentation attribute) */
.sjd-campaign .pin-g.is-spreading .pin-dot { fill: rgba(206,14,45,.38); stroke: rgba(255,255,255,.9); }
/* The joy network: thin red hops between the dots in landing order. Width
   (constant on screen), dash and resting opacity are set by map.js. */
.sjd-campaign .sjd-net { fill: none; stroke: var(--selati); stroke-linecap: round; stroke-linejoin: round; }

/* Comment callouts: reel-style cards pointing at a shared comment's dot.
   map.js places them (left / top / --px = the pointer's x inside the card)
   inside the map, clear of each other and of their own dot. The layer is
   aria-hidden: the index rows carry the same comments. */
.sjd-campaign .sjd-callouts { position: absolute; inset: 0; z-index: 5; margin: 0; padding: 0; pointer-events: none; transition: opacity .18s ease; }
/* the map is moving (zoom / pan): the cards step aside until it stops */
.sjd-campaign .sjd-callouts.is-moving { opacity: 0; }
.sjd-campaign .sjd-callouts.is-moving .sjd-co { pointer-events: none; }
/* a card (#tip) is open: the callouts step back */
.sjd-campaign .map-card.is-tip-open .sjd-callouts { opacity: .3; }
.sjd-campaign .sjd-co { position: absolute; left: 0; top: 0; width: 232px; margin: 0; padding: 0; pointer-events: auto; cursor: pointer; transform-origin: var(--px, 50%) 100%; transition: opacity .4s ease, transform .4s ease; -webkit-tap-highlight-color: transparent; }
.sjd-campaign .sjd-co.is-below { transform-origin: var(--px, 50%) 0; }
.sjd-campaign .sjd-co.is-out { opacity: 0; transform: scale(.94); pointer-events: none; }
.sjd-campaign .sjd-co-in { position: relative; filter: drop-shadow(0 6px 14px rgba(43,39,37,.26)) drop-shadow(0 1px 2px rgba(43,39,37,.18)); transform-origin: var(--px, 50%) 100%; }
.sjd-campaign .sjd-co.is-below .sjd-co-in { transform-origin: var(--px, 50%) 0; }
.sjd-campaign .sjd-co.is-in .sjd-co-in { animation: sjd-co-pop .5s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes sjd-co-pop { 0% { opacity: 0; transform: scale(.55); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
.sjd-campaign .sjd-co-box { overflow: hidden; border-radius: 12px; background: #fff; }
/* red strip: "@handle" left, the place + a pin right (white, never caps) */
.sjd-campaign .sjd-co-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin: 0; padding: 6px 10px 6px 11px; background: var(--selati); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; }
.sjd-campaign .sjd-co-h { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sjd-campaign .sjd-co-pl { display: flex; align-items: center; flex: 0 1 auto; gap: 3px; min-width: 0; max-width: 58%; font-weight: 600; }
.sjd-campaign .sjd-co-plt { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sjd-campaign .sjd-co-pin { display: block; flex: none; width: 9px; height: 12px; }
.sjd-campaign .sjd-co-t { margin: 0; padding: 9px 13px 11px; font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-align: center; text-transform: none; color: var(--ink); overflow-wrap: anywhere; }
/* the pointer: white under a card above its dot, red over a card below it */
.sjd-campaign .sjd-co-ptr { position: absolute; left: var(--px, 50%); bottom: -7px; width: 0; height: 0; margin-left: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #fff; }
.sjd-campaign .sjd-co.is-below .sjd-co-ptr { top: -7px; bottom: auto; border-top: 0; border-bottom: 8px solid var(--selati); }

@media (max-width: 900px) {
  .sjd-campaign .hero-in { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .sjd-campaign .layout { grid-template-columns: 1fr; }
  .sjd-campaign .banner { grid-template-columns: 1fr; }
  /* one column: line the buttons up with the left-aligned text (≤640 stretches them) */
  .sjd-campaign .sjd-banner-actions { align-items: flex-start; }
  /* the three counters stay side by side (no orphan third cell) */
  .sjd-campaign .stat { padding: 18px 8px 18px 0; }
  .sjd-campaign .stat + .stat { padding-left: 18px; }
  .sjd-campaign .meter-ticks i { font-size: 10.5px; padding: 8px 0; }
  /* the index heads its own section once it stacks under the map */
  .sjd-campaign .index { margin-top: 8px; }
  .sjd-campaign .index h2 { font-size: clamp(24px, 3.4vw, 36px) !important; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 6px; text-wrap: balance; }
  .sjd-campaign .index .sub { font-size: 13.5px; }
  /* bottom sheet; z-index clears the theme's back-to-top button (Neve: 999) */
  .sjd-campaign #tip { position: fixed; left: 12px !important; right: 12px; bottom: 12px; top: auto !important; width: auto; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; z-index: 1000; border-radius: 22px; box-shadow: 0 -6px 40px rgba(43,39,37,.28); }
  /* dims the page behind the sheet; tapping it closes the sheet (map.js) */
  .sjd-sheet-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 999; margin: 0; padding: 0; border: 0; background: rgba(43,39,37,.35); cursor: pointer; -webkit-tap-highlight-color: transparent; animation: sjd-fade-in .2s ease both; }
  /* the sheet's photo strip is taller (more of the photo / place name) */
  .sjd-campaign #tip .tphoto { height: 150px; }
  .sjd-campaign #tip .tphoto.sjd-tphoto-brand { padding: 14px 18px 16px; }
  .sjd-campaign #tip .sjd-brand-big { font-size: 34px; }
  .sjd-campaign #tip .sjd-brand-big.is-mid { font-size: 29px; }
  .sjd-campaign #tip .sjd-brand-big.is-long { font-size: 25px; }
  .sjd-campaign #tip ul.sjd-tlist { max-height: none; overflow: visible; }
  /* 44px touch targets in the bottom sheet and on the story cards */
  .sjd-campaign #tip .tl,
  .sjd-campaign .sjd-story a.sjd-story-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; }
  .sjd-campaign #tip .tclose { width: 44px; height: 44px; top: 6px; right: 6px; }
}
@media (max-width: 640px) {
  .sjd-campaign .shell { padding-left: 16px; padding-right: 16px; }
  .sjd-campaign h1 { font-size: clamp(29px, 9vw, 38px); line-height: 1.0; }
  /* a shallower scalloped edge (22px) and enough padding that the province
     chips sit fully on red, clear of the white arches */
  .sjd-campaign .hero { padding-top: 12px; padding-bottom: 44px; }
  .sjd-campaign .hero::after { height: 22px;
    -webkit-mask: radial-gradient(13px 22px at 50% 100%, transparent 98%, #000 100%) repeat-x; mask: radial-gradient(13px 22px at 50% 100%, transparent 98%, #000 100%) repeat-x;
    -webkit-mask-size: 26px 22px; mask-size: 26px 22px; }
  .sjd-campaign .hero-in { padding-top: 16px; gap: 12px; }
  .sjd-campaign .lede { font-size: 13.5px; line-height: 1.5; max-width: none; }
  .sjd-campaign .meter { margin-top: 18px; }
  .sjd-campaign .meter-head { font-size: 11px; margin-bottom: 8px; }
  .sjd-campaign .meter-ticks { gap: 4px; }
  .sjd-campaign .meter-ticks i { font-size: 10px; padding: 7px 0; border-radius: 8px; letter-spacing: .02em; }
  .sjd-campaign .badge { font-size: 10.5px; padding: 6px 11px; }
  .sjd-campaign .logo-wrap img,
  .sjd-campaign .logo-wrap .sjd-logo-img { height: 48px; max-width: 140px; }
  /* counters: three compact columns */
  .sjd-campaign .stat { padding: 16px 6px 16px 0; }
  .sjd-campaign .stat + .stat { padding-left: 12px; }
  .sjd-campaign .stat b { font-size: 30px; }
  .sjd-campaign .stat span { font-size: 11.5px; line-height: 1.3; }
  /* The map earns the full width of the phone, with nothing over the
     country but the comment callout: the legend sits small in the empty
     top-left corner, the hint and the zoom buttons share a row under the map. */
  .sjd-campaign .map-card { margin-left: -16px; margin-right: -16px; border-radius: 0; padding: 8px 8px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 8px; }
  .sjd-campaign .map-card > .map-stage { grid-column: 1 / -1; grid-row: 1; }
  /* under the map it covers nothing, so it stays (map.js fades it after 5s) */
  .sjd-campaign .map-card > .map-hint { position: relative; left: auto; bottom: auto; grid-column: 1; grid-row: 2; justify-self: start; max-width: 100%; margin-left: 4px; font-size: 10.5px; padding: 6px 11px; border-radius: 14px; text-wrap: balance; opacity: 1 !important; }
  .sjd-campaign .map-card > .zoom-ctl { position: relative; right: auto; bottom: auto; grid-column: 2; grid-row: 2; flex-direction: row; gap: 6px; margin-right: 4px; }
  .sjd-campaign .zoom-ctl button { width: 44px; height: 44px; border-radius: 12px; }
  .sjd-campaign .map-keys { left: 12px; top: 12px; gap: 5px; max-width: calc(100% - 24px); }
  .sjd-campaign .legend div { gap: 6px; font-size: 10px; padding: 4px 9px; }
  .sjd-campaign .legend i { width: 8px; height: 8px; }
  /* one callout at a time, at most 72% of the map wide (width from map.js) */
  .sjd-campaign .sjd-co-head { font-size: 11px; padding: 5px 9px 5px 10px; }
  .sjd-campaign .sjd-co-t { font-size: 12.5px; padding: 8px 11px 10px; }
  .sjd-campaign .map-credit { margin-left: 0; }
  .sjd-campaign .banner { border-radius: 20px; padding: 28px 22px; }
  .sjd-campaign .banner .cta { display: block; text-align: center; }
  .sjd-campaign .sjd-banner-actions { align-items: stretch; }
  .sjd-campaign .banner a.sjd-banner-tag { text-align: center; white-space: normal; }
  .sjd-campaign #tip { bottom: max(12px, env(safe-area-inset-bottom)); }
  .sjd-campaign #tip.compact .tphoto { display: block; }
  .sjd-campaign #tip.compact .tphoto.sjd-tphoto-brand { display: flex; }
  .sjd-campaign #tip.compact .tbody { padding-top: 14px; }
  /* Stories / Wall: swipe on phones (no arrow buttons); the next card peeks in */
  .sjd-campaign .sjd-sec-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
  .sjd-campaign .sjd-sec-head > .sjd-nav { display: none; }
  .sjd-campaign .sjd-sec-head > .sjd-wall-toggle { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
  .sjd-campaign .sjd-sec-head p { font-size: 13.5px; }
  .sjd-campaign .sjd-stories { margin-top: 40px; }
  /* 4:5 tiles, narrow enough that the next card peeks in */
  .sjd-campaign .sjd-story-track { grid-auto-columns: 74%; gap: 12px; margin: 0 -16px; padding: 4px 16px 16px; scroll-padding-inline: 16px; }
  .sjd-campaign .sjd-story-body { padding: 16px 18px 18px; }
  .sjd-campaign .sjd-story-title { font-size: 18px; }
  .sjd-campaign .sjd-story-quote { font-size: 14px; }
  .sjd-campaign .sjd-story-media--brand .sjd-brand-fill { padding: 16px 16px 18px; }
  .sjd-campaign .sjd-story-media--brand .sjd-brand-big { font-size: 30px; }
  .sjd-campaign .sjd-story-media--brand .sjd-brand-big.is-mid { font-size: 25px; }
  .sjd-campaign .sjd-story-media--brand .sjd-brand-big.is-long { font-size: 21px; }
  .sjd-campaign .sjd-wall { border-radius: 20px; padding: 26px 0 14px; }
  .sjd-campaign .sjd-wall .sjd-sec-head { padding: 0 20px; }
  .sjd-campaign .sjd-note-track { scroll-padding-inline: 20px; }
  .sjd-campaign .sjd-note-lane { gap: 12px; padding: 4px 20px 14px; }
  .sjd-campaign .sjd-note { width: min(272px, 74vw); padding: 14px 18px 16px; }
  .sjd-campaign .sjd-note-text { font-size: 14.5px; }
}
/* Very narrow phones: the badge drops under the logo rather than wrapping
   inside itself and leaving one word on its own line. */
@media (max-width: 380px) {
  .sjd-campaign .top { flex-wrap: wrap; row-gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sjd-campaign .sprinkles i, .sjd-campaign .badge b { animation: none; }
  .sjd-campaign .sjd-story-media img,
  .sjd-campaign #tip .tl { transition: none; }
  .sjd-campaign .sjd-story:hover .sjd-story-media img { transform: none; }
  /* no sweeping meter, sliding rows, animated accordions or popping
     callouts (map.js also makes the d3 zooms instant, draws the network at
     once and shows a fixed set of callouts) */
  .sjd-campaign .meter-fill,
  .sjd-campaign .meter-ticks i,
  .sjd-campaign .row,
  .sjd-campaign .prov-rows,
  .sjd-campaign .prov-group:not(.open) .prov-rows,
  .sjd-campaign .prov-toggle .chev::before,
  .sjd-campaign .pin-dot,
  .sjd-campaign .sjd-callouts,
  .sjd-campaign .sjd-co,
  .sjd-campaign #tip button.sjd-tlist-item { transition: none; }
  .sjd-campaign .sjd-co.is-in .sjd-co-in { animation: none; }
  .sjd-campaign .row:hover, .sjd-campaign .row.active { transform: none; }
  /* loading placeholders hold still */
  .sjd-campaign .sjd-skel,
  .sjd-campaign.is-loading .stat b,
  .sjd-campaign.is-loading #lede-count,
  .sjd-campaign.is-loading #meter-label,
  .sjd-campaign #list:empty::before,
  .sjd-campaign .sjd-story-skel .sjd-story-media::after,
  .sjd-campaign .sjd-story-skel:empty::before,
  .sjd-sheet-backdrop { animation: none !important; }
  /* belt and braces: the Wall never auto-scrolls under reduced motion */
  .sjd-campaign .sjd-note-lane { animation: none !important; transform: none !important; }
  .sjd-campaign .sjd-note-track.is-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .sjd-campaign .sjd-note.is-clone { display: none; }
  .sjd-campaign .sjd-wall-toggle { display: none !important; }
}

/* DIVI TRANSPARENT HEADER (selati.co.za) ---------------------------------
   Divi's JS pads the page content by the header height (inline style), which
   left a white strip under the see-through fixed header. Let the red hero run
   under the header like the site's other page heroes, clear the hanging logo,
   and drop the campaign's own wordmark (the site logo sits right above it). */
body.et_transparent_nav.sjd-campaign-page #main-content .container { padding-top: 0 !important; }
body.et_transparent_nav.sjd-campaign-page .sjd-campaign .hero { padding-top: 140px; }
body.et_transparent_nav.admin-bar.sjd-campaign-page .sjd-campaign .hero { padding-top: 172px; }
body.et_divi_theme.sjd-campaign-page .sjd-campaign .logo-wrap { display: none; }
body.et_divi_theme.sjd-campaign-page .sjd-campaign .top { justify-content: flex-end; }
body.et_divi_theme.sjd-campaign-page #main-header .mobile_menu_bar::before { color: #fff; }
@media (max-width: 980px) {
  body.et_transparent_nav.sjd-campaign-page .sjd-campaign .hero { padding-top: 100px; }
  body.et_transparent_nav.admin-bar.sjd-campaign-page .sjd-campaign .hero { padding-top: 146px; }
}
/* Divi: the active menu item is the theme's red, invisible on the red hero */
body.et_divi_theme.sjd-campaign-page #top-menu li.current-menu-item > a { color: #fff !important; opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
/* Divi: the site footer's wave overlaps the end of the page (~70px); the site footer already
   carries the brand + socials, so the campaign's own footer line goes and the banner gets room */
body.et_divi_theme.sjd-campaign-page .sjd-campaign > footer { display: none; }
body.et_divi_theme.sjd-campaign-page .sjd-campaign { padding-bottom: 120px; }
@media (max-width: 980px) { body.et_divi_theme.sjd-campaign-page .sjd-campaign { padding-bottom: 72px; } }