.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){ .cp-lightbox{padding:12px} .cp-lightbox-x{top:2px;right:2px} }

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

  @media(max-width:820px){
    .cwrap{grid-template-columns:1fr}

    /* the bar itself */
    .cp-bar{
      display:flex; align-items:center; gap:10px;
      position:fixed; left:0; right:0; bottom:0; z-index:900;
      background:#fff; border-top:1px solid var(--line);
      padding:8px 12px calc(8px + env(safe-area-inset-bottom));
      box-shadow:0 -4px 18px rgba(0,0,0,.13);
    }
    .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 */
    body{padding-bottom:76px}

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