/* Page-local, progressive proposal camera. No scroll interception.
   The full original page remains the static/reduced-motion view. */
.ee-tools #fund.phase--opening{--fund-pad:clamp(36px,5vw,64px);border-top:0;padding-top:calc(var(--nav-h,56px) + var(--fund-pad))}
.ee-tools #fund .intro{--intro-gap:clamp(28px,3vw,44px);padding:0;margin-bottom:var(--intro-gap)}
.ee-tools #fund > .phase__body{border-top:1px solid var(--ee-rule-soft);padding-top:clamp(28px,3vw,40px)}
.ee-tools #fund .panel--fund{row-gap:18px}
/* 2026-09-21 (John): "make the proposal larger so it covers more of the
   empty space". The document now fills its column on first paint; the cap
   only matters on very wide screens, where the hero column is still the
   wider of the two (1.14fr) and a 760px page reads as a page, not a poster. */
.ee-tools #fund .proposal{max-width:760px;margin:0}
.ee-tools #fund .proposal__zoom{width:min(100%,calc(420px * 1530 / 1980));max-width:100%;margin-inline:auto;cursor:default}
.ee-tools #fund .proposal__zoom img{width:100%;max-width:100%;height:auto;max-height:none;margin:0}
/* Highlighter strokes exist only with the scroll camera; static, reduced
   motion and runtime-disabled views show the untouched original page. */
.ee-tools #fund .proposal__marks{display:none}
@media (max-width:600px){
  /* Match the mobile text column, including the static/no-JS document. */
  .ee-tools #fund .proposal__zoom{width:100%}
}
@media (min-width:1060px){
  .ee-tools #fund.phase--opening{grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);row-gap:0}
  /* The hero sits on the midpoint between the header and the Measure rule
     (2026-09-23, John). The proposal spans both rows and is far taller than
     the copy, so this row always has room to spare; centring spends it above
     and below the text instead of leaving it all underneath. The row starts
     --fund-pad below the header and the hero's own margin sits under it, so
     plain centring lands (pad - gap) / 2 low; the relative nudge takes that
     back without moving the grid, and it tracks both clamps at every width.
     If the row ever has no room to spare, the nudge only lifts the text
     into the section's own top padding, never under the header. */
  .ee-tools #fund .intro{grid-column:1;grid-row:1;min-width:0;align-self:center;position:relative;top:calc((var(--intro-gap) - var(--fund-pad)) / 2)}
  .ee-tools #fund > .phase__body{grid-column:1;grid-row:2}
  .ee-tools #fund .phase__media--doc{grid-column:2;grid-row:1 / span 2;align-self:stretch}
}

@media (prefers-reduced-motion:no-preference){
  .ee-tools #fund .phase__media--doc[data-proposal-motion="ready"]{
    --proposal-h:min(clamp(220px,42svh,340px),calc(100svh - 144px));
    --proposal-travel:clamp(200px,32svh,300px);
    --proposal-top:calc(var(--nav-h,56px) + 16px);
  }
  @media (max-width:600px){
    .ee-tools #fund .phase__media--doc[data-proposal-motion="ready"]{
      /* Start at column width; only a short viewport may limit the height.
         Keep the complete page and room below the sticky frame. */
      --proposal-h:min(var(--proposal-h-cap),calc(100svh - var(--nav-h,56px) - 32px));
    }
  }
  /* A real flow spacer, not padding: sticky cannot travel into its parent's
     padding box. On desktop the track also spans the hero and Measure rows. */
  .ee-tools #fund .phase__media--doc[data-proposal-motion="ready"]::after{
    content:'';display:block;height:var(--proposal-travel);
  }
  .ee-tools #fund [data-proposal-motion="ready"] .proposal{
    position:sticky;top:var(--proposal-top);
  }
  .ee-tools #fund [data-proposal-motion="ready"] .proposal__zoom{
    width:var(--proposal-frame-width,calc(var(--proposal-h) * 1530 / 1980));
    height:var(--proposal-h);overflow:hidden;border-radius:3px;
    background:var(--ee-paper-2,#FCFBF7);
    box-shadow:0 1px 2px rgba(22,32,43,.10),0 12px 32px -24px rgba(22,32,43,.25);
    isolation:isolate;
  }
  /* The image and its highlighter layer share one box and one camera
     transform (written once per frame by proposal-zoom.js), so the strokes
     cannot drift from the raster. Sizes change only at real sizing events. */
  .ee-tools #fund [data-proposal-motion="ready"] .proposal__zoom img,
  .ee-tools #fund [data-proposal-motion="ready"] .proposal__marks{
    position:absolute;left:0;top:0;max-width:none;max-height:none;margin:0;
    width:var(--proposal-iw,100%);height:var(--proposal-ih,auto);
    transform-origin:0 0;transform:var(--proposal-camera,none);box-shadow:none;
  }
  /* Yellow marker behind the ink: multiply leaves white paper yellow and
     dark type dark, with no outline. Strokes draw left to right in order
     with scroll progress and erase on the way back. */
  .ee-tools #fund [data-proposal-motion="ready"] .proposal__marks{
    display:block;pointer-events:none;mix-blend-mode:multiply;--n:5;
  }
  .ee-tools #fund .proposal__mark{
    --k:clamp(0,calc(var(--proposal-mark,0) * var(--n) - var(--i)),1);
    position:absolute;display:block;
    background:linear-gradient(100deg,rgba(255,229,77,.7),rgba(255,219,31,.92) 10%,rgba(255,222,41,.86) 90%,rgba(255,229,77,.62));
    border-radius:12% 20% 16% 24% / 40% 52% 46% 58%;
    clip-path:inset(0 calc(100% - 100% * var(--k)) 0 0);
  }
  @media (max-width:600px){
    .ee-tools #fund [data-proposal-motion="ready"] .proposal__marks{--n:2}
    .ee-tools #fund .proposal__mark:nth-child(n+3){display:none}
  }
  @media (min-width:1060px){
    .ee-tools #fund .phase__media--doc[data-proposal-motion="ready"]{
      /* Three ceilings, lowest wins: the viewport (nav, 24px pin offset and
         48px of room below), the column (--proposal-h-cap, set by
         proposal-zoom.js from the figure's width so the stage is exactly the
         page's height when the width is the limit), and 980px. The old fixed
         min(58svh,560px) left the page at 433px wide in a 673px column. */
      --proposal-h:min(calc(100svh - var(--nav-h,56px) - 72px),var(--proposal-h-cap,980px),980px);
      --proposal-top:calc(var(--nav-h,56px) + 24px);
      --proposal-travel:clamp(340px,52svh,560px);
      align-self:stretch;
    }
    .ee-tools #fund[data-proposal-copy-pin] > .phase__body{
      position:sticky;top:calc(var(--nav-h,56px) + 24px);align-self:start;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  .ee-tools #fund .proposal__zoom img{transform:none !important}
  .ee-tools #fund .proposal__marks{display:none !important}
}