.cwrap{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
  .ctitle{text-align:center;font-size:26px;margin:4px 0 14px}
  .story p{margin:0 0 12px}.story{line-height:1.65}
  .crail{display:flex;flex-direction:column;gap:16px}
  .vwrap{position:relative;padding-top:56.25%;background:#000}
  .vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  /* carousel */
  .carousel{position:relative;background:#f3f1ec;line-height:0;font-size:0}
  .cslide{display:none;width:100%;height:auto;vertical-align:top}
  .cslide.on{display:block}
  .cnav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;
        background:rgba(0,0,0,.42);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .cnav.prev{left:10px}.cnav.next{right:10px}.cnav:hover{background:rgba(0,0,0,.62)}
  .cdots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center}
  .cdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer}
  .cdot.on{background:#fff}
  /* share */
  .sharerow{display:flex;gap:10px;justify-content:center}
  .sbtn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
        color:#fff;font-weight:700;font-size:16px;text-decoration:none}
  .sbtn.fb{background:#1877f2}.sbtn.x{background:#111}.sbtn.wa{background:#25d366}.sbtn.em{background:#7a8a86}
  /* donations */
  .dsearch{width:100%;margin-top:12px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit}
  .drow{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
  /* ---- endorsement (desktop rail) ---- */
  .cp-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a96a2;font-weight:700}
  .cp-rav{font-size:16px;font-weight:700;margin:4px 0 1px;line-height:1.3}
  .cp-org{font-size:13px;color:#66757a;margin:0 0 10px;line-height:1.35}
  .cp-letter{display:block;text-decoration:none;color:var(--magenta);font-size:13px;font-weight:600}
  .cp-letter img{width:100%;max-height:190px;object-fit:cover;object-position:top;
                 border:1px solid var(--line);border-radius:8px;display:block;margin-bottom:7px;background:#f4f6f6}

  /* ---- the letter, full size, on the page ---- */
  .cp-lightbox{display:none;position:fixed;inset:0;z-index:1000;background:rgba(12,20,19,.88);
               padding:22px;overflow:auto}
  .cp-lightbox.on{display:flex;align-items:flex-start;justify-content:center}
  .cp-lightbox-inner{position:relative;max-width:900px;width:100%;margin:auto}
  .cp-lightbox img{width:100%;height:auto;border-radius:10px;background:#fff;display:block}
  .cp-lightbox-cap{color:#fff;font-size:14px;font-weight:600;margin-bottom:10px;text-align:center}
  .cp-lightbox-x{position:absolute;top:-6px;right:-6px;width:38px;height:38px;border-radius:50%;
                 border:0;background:#fff;color:#15605a;font-size:24px;line-height:1;cursor:pointer;
                 box-shadow:0 2px 10px rgba(0,0,0,.35);z-index:2}
  @media (max-width:820px), (hover:none) and (pointer:coarse){ .cp-lightbox{padding:12px} .cp-lightbox-x{top:2px;right:2px} }

  /* ---- mobile bar: hidden on desktop ---- */
  .cp-bar{display:none}

  @media (max-width:820px), (hover:none) and (pointer:coarse){
    .cwrap{grid-template-columns:1fr}

    /* the bar itself */
    /* MK 2026-10-08: ONE fixed panel, two rows -- the campaign totals sit above the
       endorsement row so a phone always sees what has been raised while scrolling.
       .cp-bar is now the panel; .cp-bar-row is the old flex row, unchanged in look. */
    .cp-bar{
      display:block;
      position:fixed; left:0; right:0; bottom:0; z-index:900;
      background:#fff; border-top:1px solid var(--line);
      padding:0 0 env(safe-area-inset-bottom);
      box-shadow:0 -4px 18px rgba(0,0,0,.13);
    }
    .cp-bar-stats{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      min-height:42px; padding:6px 14px; border-bottom:1px solid var(--line);
    }
    .cp-bar-stat{font-size:12.5px;color:#7d8b90;min-width:0;
                 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cp-bar-stat b{font-size:17px;font-weight:800;color:#15605a;margin-right:5px}
    .cp-bar-sep{flex:0 0 1px;align-self:stretch;background:var(--line);margin:6px 0}
    .cp-bar-row{display:flex; align-items:center; gap:10px; padding:8px 12px;}
    .cp-bar-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#f4f6f6}
    .cp-bar-mid{flex:1 1 auto;min-width:0;line-height:1.25}
    .cp-bar-end{display:block;text-decoration:none;color:inherit}
    .cp-bar-end .cp-eyebrow{display:block;font-size:9.5px;letter-spacing:.12em}
    .cp-bar-rav{display:block;font-size:13px;font-weight:700;color:#15605a;
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cp-bar-org{display:block;font-size:10.5px;color:#7d8b90;
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cp-bar-name{font-size:12.5px;color:#66757a;display:block;
                 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cp-bar-btn{flex:0 0 auto;padding:11px 20px;font-size:15px;font-weight:700;border-radius:9px}

    /* so the bar never covers the last of the page */
    /* the panel is now two rows: stats (~42) + endorsement row (~60) */
    body{padding-bottom:calc(118px + env(safe-area-inset-bottom))}

    /* the rail's own endorsement card would duplicate the bar on a phone */
    .cp-endorsed{display:none}
  }

  /* ---- STICKY DONATE CARD (desktop only) ----------------------------------
     MK 2026-09-24: on a phone the donate bar is always under your thumb, but on
     desktop you had to scroll back up to give. This pins the donate card to the
     top of the viewport while the story scrolls past it.

     Pinning the WHOLE .crail would not work: the rail stacks five cards and is
     far taller than any viewport, so it would pin once and immediately carry the
     button off-screen. Pinning the first card keeps the button itself in view,
     with the rest of the rail scrolling normally beneath it.

     .cwrap already sets align-items:start, which sticky needs - without it the
     grid item stretches to full height and sticky silently does nothing.
     Mobile is deliberately untouched: .cp-bar still handles it there.          */
  @media (min-width:821px) and (hover:hover) and (pointer:fine){
    .crail > .card:first-of-type{
      position:-webkit-sticky;
      position:sticky;
      top:24px;
      z-index:5;
    }
  }