/* Tzu Chi Philippines: mockup 03 "Signature", the coin can story.
   The scenes after the opening: the coin bank in the wheel (js/can.js), the
   figures journey (js/journey.js), the coin becoming the Eight Footprints and
   their landing on the map (js/trail.js), and the last word. Everything that
   moves needs html.mo; without it each part stands still, in order. */

/* ------------------------------------------------------ the coin bank ----
   In the wheel: low at the right, tilted so its mouth faces the photograph in
   front, hanging past the bottom of the stage into the next screen so the two
   read as one. In the ring: at the left, where the photographs leave. The
   photographs come round and, as they leave the front, become coins that go
   into the can (js/can.js places them, their coins and their names as the
   wheel turns). The can paints over the photographs, so a coin going in
   slips in at the back of the rim. The wheel clips its photographs, the
   section clips the sides, and in the wheel the stage paints over the next
   section. The can and the coins are decoration; the label beside the can
   is text: in the wheel it runs from the middle of the screen to the can. */
.mo .wh__rim{visibility:hidden}          /* no guide circle; js/can.js measures the wheel by it */
.can{display:none}
.can__body{position:relative;display:block;height:100%}
.can__img{display:block;width:auto;height:100%;filter:drop-shadow(0 22px 26px rgba(23,32,27,.24))}
/* the middle of the rim, where a coin goes in */
.can__mouth{position:absolute;left:50%;top:.5%;width:0;height:0}
/* each photograph's coin, over it */
.wh__coin{position:absolute;inset:0;border-radius:50%;opacity:0;background:url(../img/piso-coin.webp) center/100% no-repeat;
          box-shadow:0 4px 12px rgba(23,32,27,.3)}
.mo-wheel .wh__p,.mo-ring .wh__p{will-change:transform,opacity}

.mo-wheel .gs{overflow-x:clip}
.mo-wheel .gs__stage{overflow:visible;z-index:2}
.mo-wheel .wh{overflow:clip}
.mo-wheel .can{display:block;position:absolute;z-index:1;pointer-events:none;
               width:clamp(200px,21cqw,440px);aspect-ratio:522/1130;
               left:calc(83cqw - clamp(200px,21cqw,440px) / 2);top:79cqh;
               transform:rotate(-36deg);transform-origin:50% 0}
.mo-ring .gs__stage{position:relative;overflow-x:clip}
.mo-ring .can{display:block;position:absolute;z-index:1;pointer-events:none;
              width:min(24cqw,150px);aspect-ratio:522/1130;
              left:calc(16cqw - min(24cqw,150px) / 2);top:calc((min(58cqw,380px) * .8 + min(46cqw,300px) / 2) * .42);
              transform:rotate(36deg);transform-origin:50% 0}

.can__label{margin:0 auto 26px;padding:0 var(--gut);max-width:var(--hold);font-size:16px;line-height:1.5;color:var(--ink-2)}
.can__label b{color:var(--ink)}
.can__still{display:block;width:96px;height:auto;margin:0 0 14px;transform:rotate(-12deg)}
.mo .can__still{display:none}
/* to 28px short of the can's nearest corner (its centre, less half its width
   along the 36 degree slant: cos 36 = .809, so .4045 of the width) */
.mo-wheel .can__label{position:absolute;z-index:2;margin:0;padding:0;max-width:none;font-size:15px;
                      width:calc(33cqw - clamp(200px,21cqw,440px) * .4045 - var(--gut) - 28px);
                      left:calc(50cqw + var(--gut));bottom:clamp(18px,5cqh,48px)}
/* short wide screens (the box beside the words, past the middle): the words
   go under the box, in its column */
@media (min-width:1200px) and (max-height:779px){
  .mo-wheel .can__label{font-size:14px;width:min(380px,28cqw);bottom:clamp(10px,2.4cqh,24px);
                        left:calc(max(var(--gut),calc((100cqw - var(--hold)) / 2 + var(--gut))) + min(440px,34cqw) + clamp(20px,2.2cqw,36px))}
}
/* and the shortest of them: the first sentence only, so it clears the box */
@media (min-width:1200px) and (max-height:640px){
  .mo-wheel .can__more{display:none}
}
.mo-ring .can__label{max-width:38ch;margin:2px auto 14px;font-size:14.5px;text-align:center}

/* -------------------------------------------- the ring, pinned on phones --
   A phone held upright (at least 620px tall, so it fits): the page's scroll
   turns the ring, as it does the wheel on wide screens (js/app.js). The stage
   sticks under the header for the four kinds of help: each card in turn
   slides to the front and the photograph leaving the front goes into the
   can. The ring is sized to the screen's height too. The cards keep only
   their words, as the ring shows their photographs (kept for screen
   readers). The can's words stand under the cards where there is room
   (else they lead the box) and the donation box follows the stage
   (.gs__after, js/app.js); the cards are each as tall as their words, and
   what room is left is shared above and below the ring and the card in
   front, three parts above to two below (--pin-pad). The docked bar stays
   down meanwhile. */
@media (max-width:719px) and (min-height:620px){
  .mo-ring .gs__track{height:calc(100svh - var(--hd,72px) + 238svh)}
  .mo-ring .gs__stage{position:sticky;top:var(--hd,72px);height:calc(100svh - var(--hd,72px));overflow:clip;
                      display:flex;flex-direction:column;padding-top:var(--pin-pad,0px)}
  /* the ring's middle higher than in the swipe, so less of its arc shows
     above the photograph in front: the front at .55 of the radius down */
  .mo-ring .wh{flex:none;--dw:min(38cqw,calc((100svh - var(--hd,72px)) * .24),300px);--R:calc(var(--dw) * 1.26);
               --cy:calc(var(--R) * -.45);height:calc(var(--R) * .55 + var(--dw) / 2 + 18px)}
  .mo-ring .can{width:calc(var(--Rp) * .41);left:calc(16cqw - var(--Rp) * .205);top:calc(var(--pin-pad,0px) + (var(--Rp) * .55 + var(--Rp) / 2.52) * .42);
                --Rp:calc(min(38cqw,calc((100svh - var(--hd,72px)) * .24),300px) * 1.26)}
  .mo-ring .gs__stage > .can__label,.mo-ring .gs__stage .gs__give{display:none}
  .mo-ring .gs__stage > .can__label.is-under{display:block;flex:none;margin:14px auto 0}
  .mo-ring .gs__ix{margin-bottom:6px}
  .mo-ring .gs__side{flex:none}
  .mo-ring .gs__strip{overflow:hidden;scroll-snap-type:none;touch-action:pan-y}
  /* each card as tall as its words, the one in front in the middle, its
     neighbours just showing at either side */
  .mo-ring .gs__rail{align-items:flex-start;padding:0 calc(var(--gut) + 20px)}
  .mo-ring .gs__stage .gch__fig{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mo-ring .gs__stage .gch__words{padding-top:8px}
  .mo-ring .gs__stage .gch__h{font-size:clamp(20px,5.6vw,25px)}
  .mo-ring .gs__stage .gch__t{font-size:15px;line-height:1.4}
  .mo-ring .gs__stage .gch__fact{margin-top:10px}
  .mo-ring .gs__stage .gch__num{font-size:clamp(32px,9vw,40px)}
  .mo-ring .gs__after{padding:22px 0 8px}
  .mo-ring .gs__after .gs__give{margin-top:8px}
}

/* ------------------------------------------------- the figures journey ----
   2025 in four steps, then five stories, then the coin. Still (no .mo):
   each step is a block, its words (the number large) then its photographs;
   then the stories, a list; then the coin and its line. With motion: the
   stage sticks under the header for a long scroll; each step's number is a
   hole in a paper cover (svg.jr__cover, made by js/journey.js) that grows
   from inside its "1" until the photographs fill the stage; then the words
   come in at the bottom left on paper, and the step slides up and away,
   showing the next one (or, after the last, the coin) beneath it. The coin
   then turns over to each story in turn and back (see "the stories on the
   coin" below).
   js/journey.js sets each step's opacity and slide, --z (the cover's scale)
   and --wc (the words' opacity); the coin's --cs and --ce; --lift on each step, how far its words
   rise to clear the docked bar (never past the stage's top); and is-far on
   steps two or more away, whose photographs then wait to load. */
.jr{position:relative;background:var(--paper);color:var(--ink);padding:clamp(56px,8vw,112px) 0}
.jr__h{max-width:var(--hold);margin:0 auto clamp(28px,3.6vw,48px);padding:0 var(--gut);
       font-size:clamp(30px,3.6vw,48px);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.jr__step{max-width:var(--hold);margin:0 auto;padding:0 var(--gut)}
.jr__step + .jr__step{margin-top:clamp(64px,9vw,120px)}
.jr__k{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:700;letter-spacing:0;line-height:1.3}
.jr__num{margin:6px 0 0;font-size:clamp(64px,11vw,160px);font-weight:800;letter-spacing:-.03em;line-height:.92;
         font-variant-numeric:lining-nums proportional-nums}
.jr__lbl{margin:10px 0 0;font-size:clamp(18px,1.6vw,22px);font-weight:700;line-height:1.3}
.jr__cap{margin:6px 0 0;color:var(--ink-2);font-size:16px;line-height:1.45}
.jr__more{margin:8px 0 0;color:var(--ink-2);font-size:16px;line-height:1.45;max-width:40ch}
.jr__more b{color:var(--ink);font-weight:800}
.jr__collage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(120px,15vw,220px);
             grid-auto-flow:dense;gap:8px;margin-top:clamp(28px,4vw,48px)}
.jr__collage img{display:block;width:100%;height:100%;object-fit:cover;background:var(--stone-2)}
.jr__collage img:nth-child(1){grid-column:span 2;grid-row:span 2}
.jr__collage img:nth-child(2){grid-column:span 2}
.jr__collage img.at-top{object-position:50% 18%}     /* faces near the top of the photograph */
.jr__end{max-width:var(--hold);margin:clamp(64px,9vw,120px) auto 0;padding:0 var(--gut);text-align:center}
.jr__coin{display:block;width:min(44vw,240px);height:auto;margin:0 auto clamp(20px,3vw,32px);border-radius:50%;
          filter:drop-shadow(0 14px 22px rgba(23,32,27,.22))}
.jr__line{max-width:17ch;margin:0 auto;font-size:clamp(32px,4.6vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.jr__lead{margin:16px 0 0;font-size:clamp(18px,1.8vw,24px);font-weight:700}
.jr__note{max-width:52ch;margin:10px auto 0;color:var(--ink-3);font-size:14px;line-height:1.5}
/* phones: two columns, five photographs */
@media (max-width:699px){
  .jr__collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:42vw}
  .jr__collage img:nth-child(2){grid-column:auto}
  .jr__collage img:nth-child(n+6){display:none}
}
/* the stories, still: a list, a photograph with its words beside it, two
   by two where there is room. The name is the link to the story; the whole
   row opens it. */
.jr__stories{max-width:var(--hold);margin:clamp(64px,9vw,120px) auto 0;padding:0 var(--gut)}
.jr__sh{margin:0 0 clamp(20px,2.6vw,32px);font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.08}
.jr__ppl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(24px,3.2vw,48px);
         margin:0;padding:0;list-style:none}
.jr__ppl li{--pic:clamp(96px,11vw,150px);position:relative;display:grid;grid-template-columns:var(--pic) minmax(0,1fr);
            grid-template-areas:"pic t";column-gap:clamp(14px,1.8vw,24px);align-items:start}
.jr__ppl img{grid-area:pic;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--stone-2)}
.jr__pw{grid-area:t}
.jr__ppl h4{margin:0;font-size:clamp(19px,1.7vw,23px);font-weight:800;letter-spacing:-.015em;line-height:1.2}
.jr__ppl h4 a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.jr__ppl h4 a::after{content:"";position:absolute;inset:0}
.jr__ppl h4 a:hover{text-decoration-thickness:3px}
.jr__ppl h4 a:focus-visible{outline:none}
.jr__ppl h4 a:focus-visible::after{outline:3px solid var(--ink);outline-offset:4px}
.jr__pc{margin:6px 0 0;color:var(--ink-2);font-size:15px;line-height:1.4}
.jr__pt{max-width:44ch;margin:10px 0 0;font-size:clamp(16px,1.3vw,18px);line-height:1.45}
@media (max-width:899px){
  .jr__ppl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599px){
  .jr__sh{margin-bottom:16px;font-size:24px}
  .jr__ppl li{--pic:72px;column-gap:14px}
  .jr__ppl h4{font-size:18px}
  .jr__pc{font-size:14px}
  .jr__pt{margin-top:6px;font-size:15px;line-height:1.4}
}

/* with motion: the stage, the steps stacked in it */
.mo .jr{padding:0}
.mo .jr__h{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.mo .jr__track{position:relative;height:calc(var(--parts,7.5) * 200svh)}  /* each part a long scroll (--parts: js/journey.js) */
@media (max-width:719px){
  .mo .jr__track{height:calc(var(--parts,7.5) * 150svh)}  /* a little less on a phone */
}
.mo .jr__stage{position:sticky;top:var(--hd,72px);height:calc(100svh - var(--hd,72px));overflow:clip;container-type:size}
.mo .jr__step,.mo .jr__stories,.mo .jr__end{position:absolute;inset:0;max-width:none;margin:0;padding:0;opacity:0}
/* each step lies over the next, which it shows as it slides up; under the
   last, the stories (see-through) over the coin */
.mo .jr__step:nth-child(1){z-index:5}
.mo .jr__step:nth-child(2){z-index:4}
.mo .jr__step:nth-child(3){z-index:3}
.mo .jr__step:nth-child(4){z-index:2}
.mo .jr__stories{z-index:1}
.mo .jr__end{z-index:0}
.mo .jr__collage{position:absolute;inset:0;margin:0;padding:8px;grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-rows:auto;
                 background:var(--m)}       /* the gaps through the digits: the mission's colour, not white lines */
.mo .jr__step.is-far .jr__collage img{display:none}
.mo .jr__cover{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}
.mo .jr__paper{fill:var(--paper)}
.mo .jr__words{position:absolute;z-index:2;left:max(var(--gut),calc((100cqw - var(--hold)) / 2 + var(--gut)));bottom:clamp(16px,4cqh,40px);
               max-width:min(460px,calc(100cqw - 2 * var(--gut)));padding:14px 18px 16px;background:var(--paper);
               opacity:var(--wc,0);transform:translateY(calc(var(--lift,0px) * -1));transition:transform .32s var(--ease)}
.mo .jr__num{margin-top:4px;font-size:clamp(36px,7cqh,60px)}
.mo .jr__lbl{margin-top:6px}
/* a short stage (a phone turned sideways): the caption gives way so the words
   fit above the docked bar */
@media (max-height:500px){
  .mo .jr__cap{display:none}
}
.mo .jr__end{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--gut);background:var(--paper);text-align:center}
.mo .jr__coin{width:min(30cqh,44cqw,260px);transform:translateY(var(--cdy,0px)) perspective(900px) rotateY(var(--ry,0deg)) scale(var(--cs,.6))}
.mo .jr__line,.mo .jr__lead,.mo .jr__note{opacity:var(--ce,0)}
/* the stories on the coin: the layer is see-through, so the coin of the
   last line (in .jr__end, beneath) shows in the middle; js/journey.js puts
   each story's photograph on it, round (--cx, --cy: the coin's middle; --cw:
   its width), the first as the last step slides away, and turns it over to
   each in turn, their words under it (--below), the heading above (--htop),
   together in the middle of the stage; the peso shows only at the end, then
   rises to its place over its line (--cdy). Where the heading does not fit
   above the coin it stands beside it on a wide stage, or is left out
   (data-sh). Only the words in view take taps. */
.mo .jr__stories{pointer-events:none}
.mo .jr__ppl{display:block;margin:0;padding:0}
.mo .jr__ppl li{position:static;display:block}
.mo .jr__pw{position:absolute;left:50%;top:var(--below,62%);width:min(32em,calc(100cqw - 2 * var(--gut)));
            margin:0;transform:translateX(-50%);text-align:center;opacity:0}
.mo .jr__sh{position:absolute;left:50%;top:var(--htop,40px);margin:0;transform:translateX(-50%);
            font-size:clamp(20px,2vw,26px);white-space:nowrap;opacity:0}
.mo .jr__stories[data-sh="beside"] .jr__sh{left:auto;right:calc(100% - var(--cx) + var(--cw) / 2 + 32px);top:var(--cy);
                                           transform:translateY(-50%)}
.mo .jr__stories[data-sh="none"] .jr__sh{display:none}
.mo .jr__ppl h4{font-size:clamp(20px,2.2vw,28px)}
.mo .jr__pc{margin-top:6px}
.mo .jr__pt{max-width:none;margin-top:12px;font-size:clamp(17px,1.5vw,20px)}
.mo .jr__ppl img{position:absolute;left:var(--cx,50%);top:var(--cy,30%);width:var(--cw,200px);height:var(--cw,200px);
                 border-radius:50%;outline:4px solid #cfd3cf;outline-offset:-4px;opacity:0;
                 box-shadow:0 14px 22px rgba(23,32,27,.22);transform:translate(-50%,-50%)}
/* a short stage (a phone turned sideways): smaller words */
@container (max-height:420px){
  .mo .jr__ppl h4{font-size:18px}
  .mo .jr__pc{font-size:13px}
  .mo .jr__pt{margin-top:6px;font-size:15px;line-height:1.35}
}
@media (max-width:599px){
  .mo .jr__ppl h4{font-size:20px}
  .mo .jr__pt{margin-top:8px;font-size:16px}
}
/* a tall stage (phones, tablets upright): two columns, five photographs */
@media (max-aspect-ratio:1/1){
  .mo .jr__collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
  .mo .jr__collage img:nth-child(2){grid-column:auto}
  .mo .jr__collage img:nth-child(n+6){display:none}
  .mo .jr__words{right:var(--gut);max-width:none}
}

/* ------------------------------------------- the coin and the footprints ----
   Still (no .mo): the words with the ring beside them (under them on
   phones), the coin small in the middle of the ring. With motion the stage
   sticks for most of 260svh while js/trail.js spins the coin into the
   middle and grows the eight out round it (--f on each, --fl on the ring's
   line), then sends stand-ins (.trail) from the ring to the map. */
.tr__in{display:flex;align-items:center;justify-content:space-between;gap:24px 48px}
.tr__words{margin-bottom:0}
.tr__ring{position:relative;flex:none;display:grid;place-items:center}
.tr .fpr{margin:0}
.tr__coin{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;pointer-events:none}
@media (max-width:719px){
  .tr__in{display:block}
  .tr__ring{margin:24px auto 0;width:max-content}
}

/* the turning names are counted wider than they are drawn (a box round a
   turned box), so the scene clips sideways: nothing drawn reaches the edge */
.mo .tr{padding:0;overflow-x:clip}
.mo .tr__track{position:relative;height:260svh}
.mo .tr__stage{position:sticky;top:var(--hd,72px);height:calc(100svh - var(--hd,72px));display:flex;align-items:center;overflow:clip}
.mo .tr__in{width:100%}
.mo .tr__ring{perspective:900px}
.mo .tr .fpr__ring{width:min(440px,36vw,64svh);height:min(440px,36vw,64svh);--rr:calc(min(440px,36vw,64svh) * .38)}
.mo .tr .fpr__d{transform:rotate(calc(var(--k) * 45deg)) translateY(calc(var(--rr) * var(--f,1) * -1)) rotate(calc(var(--k) * -45deg)) scale(var(--f,1))}
.mo .tr .fpr__ring::before{transform:scale(var(--fl,1));opacity:var(--fl,1)}
.mo .tr__coin{width:min(300px,26vw,42svh);height:min(300px,26vw,42svh);left:0;right:0;top:0;bottom:0;margin:auto;
              filter:drop-shadow(0 14px 24px rgba(23,32,27,.25))}
/* each footprint's name, small, just outside its circle and upright as the
   ring turns. It rides the ring's turn on its own track (fpr-name), started
   at its place on the ring, and keeps the same small gap from its circle
   whichever way it faces: out by its width at the sides, by its height above
   and below. With motion only, as the still ring sits close beside the words */
.fpr__name{display:none}
.mo .tr .fpr__d{--disc:54px;--nw:84px}
.mo .tr .fpr__name{display:block;position:absolute;left:50%;top:50%;width:max-content;max-width:var(--nw);
                   --r0:calc(var(--disc) / 2 + 6px);--tw:var(--nw);--th:2.4em;
                   font-size:11.5px;font-weight:700;line-height:1.2;text-align:center;color:var(--ink-2);pointer-events:none;
                   transform-origin:0 0;rotate:calc(var(--k) * 45deg);
                   animation:fpr-name 52s linear infinite;animation-delay:calc(var(--k) * -6.5s);opacity:var(--fl,1)}
.fpr__ring:hover .fpr__name,.fpr__ring:focus-within .fpr__name,.fpr.is-away .fpr__name,.fpr.is-held .fpr__name,
.fpr.is-out .fpr__name{animation-play-state:paused}
.fpr.is-out .fpr__name{opacity:0}
@media (prefers-reduced-motion:reduce){
  .fpr__name{display:none!important}
}
/* every 15deg of the turn a: turned back by a (so it reads upright), then
   moved out from its circle. With s = sin a and c = cos a, the name's middle
   sits at s and -c times (r0 + |s| half its width + |c| half its height):
   the size of its words (--tw, --th), measured by app.js, or until then
   reckoned (the widest a name may be, two lines high) */
@keyframes fpr-name{
  0%{transform:rotate(0deg) translate(-50%,calc(-50% - var(--r0) - 0.5 * var(--th)))}
  4.1667%{transform:rotate(-15deg) translate(calc(-50% + 0.2588 * var(--r0) + 0.0335 * var(--tw) + 0.125 * var(--th)),calc(-50% - 0.9659 * var(--r0) - 0.4665 * var(--th) - 0.125 * var(--tw)))}
  8.3333%{transform:rotate(-30deg) translate(calc(-50% + 0.5 * var(--r0) + 0.125 * var(--tw) + 0.2165 * var(--th)),calc(-50% - 0.866 * var(--r0) - 0.375 * var(--th) - 0.2165 * var(--tw)))}
  12.5%{transform:rotate(-45deg) translate(calc(-50% + 0.7071 * var(--r0) + 0.25 * var(--tw) + 0.25 * var(--th)),calc(-50% - 0.7071 * var(--r0) - 0.25 * var(--th) - 0.25 * var(--tw)))}
  16.6667%{transform:rotate(-60deg) translate(calc(-50% + 0.866 * var(--r0) + 0.375 * var(--tw) + 0.2165 * var(--th)),calc(-50% - 0.5 * var(--r0) - 0.125 * var(--th) - 0.2165 * var(--tw)))}
  20.8333%{transform:rotate(-75deg) translate(calc(-50% + 0.9659 * var(--r0) + 0.4665 * var(--tw) + 0.125 * var(--th)),calc(-50% - 0.2588 * var(--r0) - 0.0335 * var(--th) - 0.125 * var(--tw)))}
  25%{transform:rotate(-90deg) translate(calc(-50% + var(--r0) + 0.5 * var(--tw)),-50%)}
  29.1667%{transform:rotate(-105deg) translate(calc(-50% + 0.9659 * var(--r0) + 0.4665 * var(--tw) + 0.125 * var(--th)),calc(-50% + 0.2588 * var(--r0) + 0.0335 * var(--th) + 0.125 * var(--tw)))}
  33.3333%{transform:rotate(-120deg) translate(calc(-50% + 0.866 * var(--r0) + 0.375 * var(--tw) + 0.2165 * var(--th)),calc(-50% + 0.5 * var(--r0) + 0.125 * var(--th) + 0.2165 * var(--tw)))}
  37.5%{transform:rotate(-135deg) translate(calc(-50% + 0.7071 * var(--r0) + 0.25 * var(--tw) + 0.25 * var(--th)),calc(-50% + 0.7071 * var(--r0) + 0.25 * var(--th) + 0.25 * var(--tw)))}
  41.6667%{transform:rotate(-150deg) translate(calc(-50% + 0.5 * var(--r0) + 0.125 * var(--tw) + 0.2165 * var(--th)),calc(-50% + 0.866 * var(--r0) + 0.375 * var(--th) + 0.2165 * var(--tw)))}
  45.8333%{transform:rotate(-165deg) translate(calc(-50% + 0.2588 * var(--r0) + 0.0335 * var(--tw) + 0.125 * var(--th)),calc(-50% + 0.9659 * var(--r0) + 0.4665 * var(--th) + 0.125 * var(--tw)))}
  50%{transform:rotate(-180deg) translate(-50%,calc(-50% + var(--r0) + 0.5 * var(--th)))}
  54.1667%{transform:rotate(-195deg) translate(calc(-50% - 0.2588 * var(--r0) - 0.0335 * var(--tw) - 0.125 * var(--th)),calc(-50% + 0.9659 * var(--r0) + 0.4665 * var(--th) + 0.125 * var(--tw)))}
  58.3333%{transform:rotate(-210deg) translate(calc(-50% - 0.5 * var(--r0) - 0.125 * var(--tw) - 0.2165 * var(--th)),calc(-50% + 0.866 * var(--r0) + 0.375 * var(--th) + 0.2165 * var(--tw)))}
  62.5%{transform:rotate(-225deg) translate(calc(-50% - 0.7071 * var(--r0) - 0.25 * var(--tw) - 0.25 * var(--th)),calc(-50% + 0.7071 * var(--r0) + 0.25 * var(--th) + 0.25 * var(--tw)))}
  66.6667%{transform:rotate(-240deg) translate(calc(-50% - 0.866 * var(--r0) - 0.375 * var(--tw) - 0.2165 * var(--th)),calc(-50% + 0.5 * var(--r0) + 0.125 * var(--th) + 0.2165 * var(--tw)))}
  70.8333%{transform:rotate(-255deg) translate(calc(-50% - 0.9659 * var(--r0) - 0.4665 * var(--tw) - 0.125 * var(--th)),calc(-50% + 0.2588 * var(--r0) + 0.0335 * var(--th) + 0.125 * var(--tw)))}
  75%{transform:rotate(-270deg) translate(calc(-50% - var(--r0) - 0.5 * var(--tw)),-50%)}
  79.1667%{transform:rotate(-285deg) translate(calc(-50% - 0.9659 * var(--r0) - 0.4665 * var(--tw) - 0.125 * var(--th)),calc(-50% - 0.2588 * var(--r0) - 0.0335 * var(--th) - 0.125 * var(--tw)))}
  83.3333%{transform:rotate(-300deg) translate(calc(-50% - 0.866 * var(--r0) - 0.375 * var(--tw) - 0.2165 * var(--th)),calc(-50% - 0.5 * var(--r0) - 0.125 * var(--th) - 0.2165 * var(--tw)))}
  87.5%{transform:rotate(-315deg) translate(calc(-50% - 0.7071 * var(--r0) - 0.25 * var(--tw) - 0.25 * var(--th)),calc(-50% - 0.7071 * var(--r0) - 0.25 * var(--th) - 0.25 * var(--tw)))}
  91.6667%{transform:rotate(-330deg) translate(calc(-50% - 0.5 * var(--r0) - 0.125 * var(--tw) - 0.2165 * var(--th)),calc(-50% - 0.866 * var(--r0) - 0.375 * var(--th) - 0.2165 * var(--tw)))}
  95.8333%{transform:rotate(-345deg) translate(calc(-50% - 0.2588 * var(--r0) - 0.0335 * var(--tw) - 0.125 * var(--th)),calc(-50% - 0.9659 * var(--r0) - 0.4665 * var(--th) - 0.125 * var(--tw)))}
  100%{transform:rotate(-360deg) translate(-50%,calc(-50% - var(--r0) - 0.5 * var(--th)))}
}
/* room for the names round the ring: they reach (circle + gap + name) past
   the ring's own box by that, less the ring's quarter that lies inside */
@media (min-width:720px){
  .mo .tr__ring{margin:0 calc(118px - min(440px,36vw,64svh) * .12)}
}
@media (max-width:719px), (max-height:500px){
  /* narrow or short screens (a phone either way up): no sticking; the scene
     plays as the ring comes into view */
  .mo .tr{padding:clamp(56px,9vw,96px) 0}
  .mo .tr__track{height:auto}
  .mo .tr__stage{position:relative;top:auto;height:auto;display:block;overflow:visible}
}
@media (max-width:719px){
  /* a smaller ring, so the names fit beside it on a phone (to 320px wide):
     44px circles, still easy to tap, and the names a size smaller */
  .mo .tr__ring{--ring:min(240px,calc((50vw - 104px) / .38))}
  .mo .tr .fpr__ring{width:var(--ring);height:var(--ring);--rr:calc(var(--ring) * .38)}
  .mo .tr .fpr__d{--disc:44px;--nw:72px;width:44px;height:44px;margin:-22px 0 0 -22px}
  .mo .tr .fpr__d .ico{width:24px;height:24px}
  .mo .tr .fpr__name{font-size:9.5px}
  /* the ring first, then the words: the coin's fall into it is short, and
     the eight stand whole with "Our work" under them (js/trail.js). The
     names reach past the ring's box (their circle, the gap and two lines,
     less the ring's quarter inside): above, into the section's own space;
     below, that far and a gap before the words */
  .mo .tr__in{display:flex;flex-direction:column}
  .mo .tr__ring{order:-1;margin:0 auto calc(76px - var(--ring) * .12)}
  .mo .tr__coin{width:min(200px,52vw);height:min(200px,52vw)}
}
@media (max-width:359px){
  .mo .tr__ring{--ring:calc((50vw - 98px) / .38)}
  .mo .tr .fpr__d{--nw:66px}
  .mo .tr .fpr__name{font-size:9px}
}
.fpr.is-out .fpr__d{opacity:0}
/* while the eight are away the empty ring holds still, so they leave from
   where they were */
.fpr.is-out .fpr__ring,.fpr.is-out .fpr__d a{animation-play-state:paused}

/* the coin falling from the figures into Our work: over the page, under the
   header; the two coins it stands in for are hidden meanwhile */
.coin-fall{position:fixed;left:0;top:0;z-index:60;width:100px;height:100px;border-radius:50%;pointer-events:none;
           box-shadow:0 14px 22px rgba(23,32,27,.22);will-change:transform}
.coin-fall[hidden]{display:none}
.jr__coin.is-gone,.tr__coin.is-gone{opacity:0!important}

/* the stand-ins on their way to the map: over the page, under the header */
.trail{position:fixed;inset:0;z-index:70;pointer-events:none}
.trail[hidden]{display:none}
.trail__d{position:absolute;left:0;top:0;display:grid;place-items:center;border-radius:50%;background:var(--m);
          box-shadow:0 6px 16px rgba(23,32,27,.25);will-change:transform}
.trail__d img{width:28px;height:28px}
/* the map's pins wait for them, then drop in; the eight they land on ripple */
#phmap.is-waiting .phm-pin{opacity:0}
#phmap.is-landed .phm-drop{animation:tr-land .6s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--n,0) * 60ms)!important}
#phmap.is-landed .phm-pin.tr-hit .phm-ring{display:block;fill:none;stroke:var(--tr-c,var(--ink));stroke-width:2.5;
                                           transform-box:fill-box;transform-origin:center;
                                           animation:tr-ripple .9s ease-out both;animation-delay:calc(var(--n,0) * 60ms + .2s)}
@keyframes tr-land{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes tr-ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}

/* ------------------------------------------------------- the last word ----
   Before the news: the heading, the line and the two ways to give, with the
   coin can tilted at the right on wide screens. With motion, a coin drops
   from behind the map into the can (js/close.js): the coin lies over the
   page, the map (and the link under it) and the can over the coin, so it
   comes out from under the map and slips in at the back of the rim. The section clips only its
   sides, so the coin can start up behind the map. The can is a link to the
   donation page: a soft glow behind it, a note under it, and it lifts a
   little under the pointer. */
.cl{position:relative;overflow:hidden;background:var(--paper);color:var(--ink);padding:clamp(64px,10vw,128px) 0}
.mo .cl{overflow:clip visible}
.mo .mapshell,.mo #offices .more{position:relative;z-index:2}
.cl__coin{position:absolute;left:0;top:0;z-index:1;border-radius:50%;pointer-events:none;will-change:transform;
          box-shadow:0 8px 14px rgba(23,32,27,.22)}      /* a shadow, not a filter: cheap to move on a phone */
.cl__coin[hidden]{display:none}
.cl__in{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(56px,8vw,128px)}
.cl__words{max-width:34rem}
.cl h2{font-size:clamp(36px,5vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.cl__line{margin:18px 0 0;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink-2);max-width:34ch}
.cl__go{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.cl__can{position:relative;z-index:2;flex:none;display:flex;flex-direction:column;align-items:center;gap:26px;
         width:clamp(150px,16vw,220px);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.cl__body{position:relative;display:block;width:100%;transform:rotate(-14deg);transition:transform .35s var(--ease)}
.cl__body img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(23,32,27,.2))}
.cl__body::before{content:'';position:absolute;z-index:-1;inset:-10% -46%;border-radius:50%;pointer-events:none;
                  background:radial-gradient(closest-side,rgba(0,112,74,.3),rgba(0,112,74,.12) 55%,rgba(0,112,74,0));
                  animation:cl-glow 3.2s ease-in-out infinite alternate}
@keyframes cl-glow{from{opacity:.5;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
.cl__can:hover .cl__body{transform:rotate(-9deg) translateY(-8px)}
.cl__can:hover .cl__body::before{animation:none;opacity:1;transform:scale(1.1)}
/* the middle of the rim, where the coin goes in */
.cl__mouth{position:absolute;left:50%;top:.5%;width:0;height:0}
/* the coin in: the can gives a shake, as a coin bank does (js/close.js) */
.cl__body img.is-shaking{animation:cl-shake .75s ease-out;transform-origin:50% 88%}
@keyframes cl-shake{0%,100%{transform:none}14%{transform:rotate(-6deg)}30%{transform:rotate(5deg)}46%{transform:rotate(-3.5deg)}
                    62%{transform:rotate(2.5deg)}78%{transform:rotate(-1.2deg)}}
/* the note, pointing up at the can: "Click" for a pointer, "Tap" for a finger */
.cl__tip{position:relative;padding:9px 16px;border:1px solid var(--rule);border-radius:var(--pill);background:var(--stone);
         font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;transition:background-color .2s var(--ease)}
.cl__tip::before{content:'';position:absolute;left:50%;top:-6px;width:10px;height:10px;margin-left:-5px;transform:rotate(45deg);
                 background:inherit;border:solid var(--rule);border-width:1px 0 0 1px}
.cl__can:hover .cl__tip{background:var(--stone-2)}
.cl__t{display:none}
@media (hover:none){
  .cl__m{display:none}
  .cl__t{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .cl__body::before{animation:none;opacity:.8}
  .cl__body{transition:none}
  .cl__body img.is-shaking{animation:none}
}
@media (max-width:619px){
  /* on phones the can comes first, just under the map, then the words */
  .cl__in{flex-direction:column;align-items:stretch;gap:36px}
  .cl__can{order:-1;align-self:center;width:clamp(110px,34vw,150px)}
}
@media (max-width:359px){
  .cl__go{flex-direction:column;align-items:stretch}
}

/* ------------------------------------------------ centred on phones ------
   On a phone the homepage stands in the middle (the user's direction,
   2026-10-04): the heads and their short lines, the figures' words, the
   four kinds of help's words, "Our work", the offices' head and "Add your
   coin" with its buttons. The lists (the offices, the news) keep their
   left edge, to read down. */
@media (max-width:719px){
  #work .sh,#offices .sh,#news .sh,.cl__words{margin-left:auto;margin-right:auto;text-align:center}
  #work .sh p,#offices .sh p,#news .sh p,.cl__line{margin-left:auto;margin-right:auto}
  #work .more,#offices .more,#news .more{text-align:center}
  #work .more--two,.cl__go{justify-content:center}
  .mo .jr__words,.jr__sh{text-align:center}
  .mo .jr__k,#story .gch__k{justify-content:center}
  #story .gch__words{text-align:center}
  #story .gch__h,#story .gch__t{margin-left:auto;margin-right:auto}
  .mo #story .gch__fact{justify-content:center}
}