/* ═══════════════════════════════════════════════════════════════════════════
   boycotts-2035.css — the explore feel, in the dark.

   Load AFTER boycotts.css so these rules win at equal specificity:
       <link rel="stylesheet" href="boycotts.css?v=1" />
       <link rel="stylesheet" href="boycotts-2035.css?v=1" />

   This site already had the good bones: an aurora behind the hero, cards that
   stagger in on scroll, a condensing top bar, a reading-progress line. What it
   did not have was the part that makes explore.html feel alive to the hand —
   surfaces that catch the light as the cursor crosses them, sections you can
   fold away, numbers that arrive rather than appear.

   The palette is untouched on purpose. The boycott/support pair and the six
   campaign themes in boycotts.css were validated together for lightness band,
   chroma floor, CVD separation and contrast against the dark surface. Nothing
   here changes a hue, a surface or a text colour — it only adds light, motion
   and structure on top of them.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --u-ease: cubic-bezier(.22,.61,.36,1);
  /* The sheen is white at very low alpha plus a breath of the campaign accent,
   * so it reads as light falling on a dark surface rather than a grey wash. */
  --u-sheen-a: .085;
  --u-sheen-b: .05;
}

/* ---- film grain: takes the flatness off large dark fields ---- */
.u-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---- pointer sheen ----------------------------------------------------------
 * --mx/--my come from boycotts-2035.js. Done with background-image and an
 * animatable custom property rather than an overlay element, because .card
 * already owns ::before (its accent rule) and .stat has its own decoration —
 * an added pseudo-element would silently clobber them. */
@property --u-sheen{ syntax:"<number>"; inherits:false; initial-value:0; }

.card, .stat, .lnk, .tcard, .panel, .askbox, .reply{
  background-image: radial-gradient(
    240px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255, calc(var(--u-sheen-a) * var(--u-sheen))),
    color-mix(in srgb, var(--cAccent, var(--accent)) calc(var(--u-sheen) * 20%), transparent) 42%,
    transparent 70%);
  background-repeat:no-repeat;
  transition: --u-sheen .35s var(--u-ease);
}
/* .card already animates opacity/transform/border/background on entrance —
 * re-declare the full list so adding the sheen doesn't drop the others. */
.card{
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1),
              border-color .2s ease, background .2s ease, box-shadow .3s ease,
              --u-sheen .35s var(--u-ease);
}
.card:hover, .stat:hover, .lnk:hover, .tcard:hover, .panel:hover,
.askbox:hover, .reply:hover{ --u-sheen: 1; }

/* The map keeps its own surface. */
.leaflet-container, .leaflet-container *{ background-image:none; }

/* ---- surfaces that were static now answer the pointer ---- */
.stat, .tcard, .panel, .askbox, .reply{
  transition: transform .28s var(--u-ease), border-color .28s ease,
              box-shadow .28s ease, --u-sheen .35s var(--u-ease);
}
.stat:hover, .tcard:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cAccent,var(--accent)) 55%, var(--line));
  box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--cAccent,var(--accent)) 60%, transparent);
}

/* ---- collapsible sections on the campaign page ------------------------------
 * boycotts-2035.js wraps each <section class="sec"> heading in a real toggle.
 * Sections start OPEN: this is a public document a stranger followed a link to
 * read, and it must stay findable with Ctrl+F and readable by a crawler. The
 * fold is there for someone who wants to skim the shape of the argument. */
.sec.u-fold{
  background: color-mix(in srgb, var(--surf) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 18px);
  overflow: hidden;
  margin-top: 18px;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.sec.u-fold:hover{ border-color: var(--line-2); }
.sec.u-fold[data-open="true"]{
  background: color-mix(in srgb, var(--surf) 90%, transparent);
  box-shadow: 0 26px 60px -40px rgba(0,0,0,.9);
}
.u-fold-h{ margin:0 !important; padding:0 !important; border:none !important; font:inherit !important; }
.u-fold-btn{
  display:flex; align-items:center; gap:14px; width:100%;
  background:none; border:none; padding:18px 20px; text-align:left;
  cursor:pointer; font-family:inherit; color:inherit; position:relative;
}
.u-fold-btn::after{
  content:""; position:absolute; left:20px; right:20px; bottom:0; height:1px;
  background:var(--line); opacity:0; transition:opacity .25s ease;
}
.sec.u-fold[data-open="true"] .u-fold-btn::after{ opacity:1; }
.u-badge{
  width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center;
  font-weight:700; font-size:13px; color:#0a0c11; font-variant-numeric:tabular-nums;
  background: linear-gradient(140deg, var(--cAccent,var(--accent)),
              color-mix(in srgb, var(--cAccent,var(--accent)) 62%, #000));
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--cAccent,var(--accent)) 85%, transparent);
}
/* The <h2> was emptied so the button could live inside it (see the JS), which
 * means the heading typography has to be restated here on the title span. */
.u-fold-title{
  flex:1; min-width:0;
  font-family: var(--fdisplay, 'Fraunces', Georgia, serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -.014em;
  color: var(--tx, #f3f1ef);
}
.u-caret{
  width:20px; height:20px; flex:none; color:var(--tx-2);
  transition: transform .3s var(--u-ease), color .2s ease;
}
.sec.u-fold[data-open="false"] .u-caret{ transform: rotate(-90deg); }
.u-fold-btn:hover .u-caret{ color: var(--cAccent, var(--accent)); }
.u-fold-body{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .42s var(--u-ease); }
.sec.u-fold[data-open="true"] .u-fold-body{ grid-template-rows:1fr; }
.u-fold-inner{ overflow:hidden; min-height:0; }
.u-fold-pad{ padding: 4px 20px 22px; }
.u-fold-pad > :first-child{ margin-top:0; }
.u-fold-pad > :last-child{ margin-bottom:0; }

/* ---- press feedback ---- */
.u-press{ transform: translateY(1px) scale(.985) !important; transition-duration:.07s !important; }

/* ---- the signature count ---- */
.bignum b{ font-variant-numeric: tabular-nums; }

/* ---- focus, on a dark surface ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--cAccent, var(--accent));
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce){
  .u-grain{ display:none; }
  .stat:hover, .tcard:hover{ transform:none; }
  .u-fold-body{ transition:none; }
  .u-caret{ transition:none; }
  .u-press{ transform:none !important; }
}

@media print{
  .u-grain, .u-caret, .progress, .rail{ display:none !important; }
  .sec.u-fold{ background:none !important; border:none !important; box-shadow:none !important; }
  .u-fold-body{ display:block !important; }
  .u-fold-inner{ overflow:visible !important; }
}


/* ---- scrolling bars: a long nav slides, it never wraps ----------------------
 * Matches urs-2035.css across the rest of the estate. boycotts-2035.js sets
 * data-ovf so the fade only appears on the edge that actually has more behind
 * it — a bar that fits carries no mask, and its text is never softened. */
.topnav, .vtabs, .seg{
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; min-width:0;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.topnav::-webkit-scrollbar, .vtabs::-webkit-scrollbar, .seg::-webkit-scrollbar{
  display:none; width:0; height:0;
}
.topnav > *, .vtabs > *, .seg > *{ flex:0 0 auto; }
.topnav a{ white-space:nowrap; }
.topbar .brand{ flex:0 0 auto; }
@media (min-width:761px){ .topnav{ flex:1 1 auto; } }

[data-ovf="right"]{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);
}
[data-ovf="left"]{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 100%);
}
[data-ovf="both"]{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
}