/* ==========================================================================
   Home — mission band: "the garden"  (garden C: A's oaks + B's flower bed)
   Link after main.css + home.css on the homepage: assets/css/garden.css
   Everything is scoped to .mission-band.garden / .garden*.

   Art: real public-domain engravings recoloured to --pine on paper (CREDITS.md):
   the great oaks and the tree line from J. C. Loudon, Arboretum et Fruticetum
   Britannicum (1838–54); the flower bed and meadow tufts from Basilius Besler,
   Hortus Eystettensis (1613/1640), each flower with an opaque paper fill inside
   its outline, as on a printed plate; seed grasses from Curtis, Flora Londinensis
   (1777) and a Cooper Hewitt study (c. 1890).

   Layout: a full-screen stage. With JS (and motion allowed) the band is taller
   than its stage and the stage is sticky, so it holds still for --pin of scroll
   while the flowers finish; then it scrolls away like any band.
   While the band slides up over the hero, the art is pinned to the bottom of the
   screen (a sticky layer inside a taller rig, pure CSS, so it never lags the
   scroll): the garden grows up from the bottom of the screen as the paper rises,
   instead of from a ground line that is still below the fold.

   Motion
   · Growth: garden.js writes ONE custom property, --p (0 → 1), from the scroll
     position. Each plant maps --p through its own window [--s, --e] and scales
     up from its base (transform only): the meadow comes up first, then the two
     great oaks rise from saplings as the band slides up over the hero, then the
     middle oaks and the misty tree line; during the hold the back row and the
     flower bed sprout from the edges in toward the statement. Reverses.
   · Wind: every plant sways from its base (the `rotate` property, big trees
     slowest, grass fastest); every --gc a gust bends it downwind (`transform:
     skewX`). The gust's delay follows the plant's x, so it visibly crosses the
     band left → right, and it loosens a few oak leaves from the canopies; two
     more leaves fall on their own clocks. Growth lives on the wrapper, wind on
     the image, so the two combine.
   · Off-screen, or after a minute with no scrolling: every animation is paused.
   · No JS: --p stays 1, fully grown, no hold, still.
   · prefers-reduced-motion: fully grown, still, no hold, no leaves, no pinning.
   ========================================================================== */

.mission-band.garden{
  --p:1;                                   /* growth, written by garden.js */
  --stage:100vh;                           /* the visible band */
  --pin:50vh;                              /* extra scroll the stage holds for (0px = no hold) */
  --u:min(1vh,1.05vw,13.5px);              /* art unit: ≈1% of the stage height, capped */
  --gc:14s;                                /* one gust every … */
  --gx:.024s;                              /* … taking 2.4s to cross the band */
  --paper-0:rgba(247,245,240,0);           /* transparent paper for the fades (= --paper at 0 alpha) */
  position:relative;padding:0;
  height:var(--stage);
  overflow:visible;                        /* not hidden/clip: the stage clips the art, and hidden would break the sticky stage */
  background:var(--pine,#123F3C);          /* anything below the stage is ground */
}
@supports (height:100svh){
  .mission-band.garden{--stage:100svh;--pin:50svh;--u:min(1svh,1.05vw,13.5px)}
}
.mission-band.garden.g-js{height:calc(var(--stage) + var(--pin))}
.mission-band.garden::before,
.mission-band.garden + .section::before{display:none}   /* no hairlines: the ground runs straight into the film band */

.garden__stage{
  position:sticky;top:0;height:var(--stage);
  overflow:hidden;overflow:clip;           /* clip, not a scroll container, so the art inside can stick to the viewport */
  isolation:isolate;
  background:var(--paper,#F7F5F0);
}

/* ---------------------------------------------------------------- the statement, on open sky */
.mission-band.garden .mission-inner{
  position:relative;z-index:3;width:100%;
  padding-top:clamp(4.8rem,13.5vh,9rem);
  display:flex;flex-direction:column;align-items:center;
}
.mission-band.garden .mission-words{
  margin:0 auto;max-width:30ch;text-align:center;text-wrap:balance;
  font-family:var(--f-serif,'Source Serif 4',Georgia,serif);font-optical-sizing:auto;
  font-weight:420;font-style:normal;font-variation-settings:normal;
  font-size:clamp(1.6rem,min(3.2vw,5.2vh),3.1rem);line-height:1.17;letter-spacing:-.013em;
  color:var(--ink,#14181A);
}
/* each sentence starts its own line and is balanced on its own, so every break falls on a phrase */
.mission-band.garden .mission-words>span,
.mission-band.garden .mission-words>em{display:block;text-wrap:balance}
.mission-band.garden .mission-words em{font-style:italic;font-weight:420;letter-spacing:-.008em;color:var(--teal,#287972)}
.mission-band.garden .mission-sig{
  /* centred under the statement (client request 2026-09-23). The signature itself sits on the
     centre line; the short rule hangs outside it to the left so it doesn't pull the signature off-axis. */
  position:relative;width:auto;margin:clamp(1.2rem,2.2vw,2rem) auto 0;
  font-size:clamp(1.6rem,min(3.2vw,5.2vh),3.1rem);line-height:1;
  display:flex;justify-content:center;align-items:center;
}
.mission-band.garden .mission-sig .rule{display:block;position:absolute;right:calc(100% + clamp(.7rem,1.2vw,1.1rem));top:50%;width:clamp(14px,1.5vw,22px);height:1px;background:var(--ink,#14181A);opacity:.55}
.mission-band.garden .mission-sig img{display:block;width:clamp(170px,18vw,265px);height:auto;opacity:.92}
/* the firm signature (a redrawn pen signature in blue-black ink, 2026-09-23) writes itself on,
   left to right, once the band's reveal fires; static without JS or under reduced motion */
.js .mission-band.garden .mission-sig.reveal img{
  -webkit-mask-image:linear-gradient(90deg,#000 48%,transparent 52%);
          mask-image:linear-gradient(90deg,#000 48%,transparent 52%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 1.6s cubic-bezier(.5,.08,.35,1) .5s,mask-position 1.6s cubic-bezier(.5,.08,.35,1) .5s;
}
.js .mission-band.garden .mission-sig.reveal.is-in img{-webkit-mask-position:0 0;mask-position:0 0}
@media (prefers-reduced-motion:reduce){
  .js .mission-band.garden .mission-sig.reveal img{-webkit-mask-image:none;mask-image:none;transition:none}
}

/* ---------------------------------------------------------------- the art
   rig: [back art] [veil] [front art], stacked in one grid cell at the bottom of the stage.
   With motion on, the rig is two stages tall and each art is sticky to the bottom of the viewport,
   so while the band's top edge is still rising the garden stands on the bottom of the screen. */
.garden__rig{
  position:absolute;left:0;right:0;bottom:0;z-index:1;height:var(--stage);
  display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);
  pointer-events:none;user-select:none;
}
.garden__art,.garden__veil{grid-area:1/1;align-self:end;position:relative;height:var(--stage)}
.mission-band.garden.g-js .garden__rig{height:calc(var(--stage) * 2)}
.mission-band.garden.g-js .garden__art{position:sticky;bottom:0}
.garden__layer{position:absolute;inset:0}

/* one plant: the wrapper grows, the image moves in the wind */
.garden .g-p{
  --t:clamp(0,(var(--p) - var(--s,0)) / (var(--e,1) - var(--s,0)),1);   /* this plant's own progress */
  --g:calc(var(--t) * var(--t) * (3 - 2 * var(--t)));                   /* eased (smoothstep) */
  position:absolute;
  left:calc(var(--x) * 1%);bottom:calc(var(--b,0) * var(--u));
  height:calc(var(--h) * var(--u));
  translate:-50% 0;rotate:var(--lean,0deg);transform-origin:50% 100%;
  transform:scale(calc(.3 + .7 * var(--g)),calc(.12 + .88 * var(--g)));  /* a flower: the stem leads, then it fills out */
  opacity:clamp(0,var(--t) * 4,1);
}
/* a tree: a slender sapling that thickens as it climbs */
.garden .g-tree{transform:scale(calc(.18 + .82 * var(--g) * var(--g)),calc(.12 + .88 * var(--g)))}
/* meadow tufts push up out of the ground */
.garden .g-rise{transform:translateY(calc((1 - var(--g)) * 72%)) scaleY(calc(.55 + .45 * var(--g)))}

.garden .g-i{
  display:block;height:100%;width:auto;max-width:none;
  transform-origin:50% 100%;
  animation:
    g-sway var(--sd,6s) ease-in-out calc(var(--x) * -.13s) infinite alternate,
    g-gust var(--gc) cubic-bezier(.45,.05,.3,1) calc(var(--x) * var(--gx) - var(--gc)) infinite;
  animation-play-state:paused;
}
.garden.is-live .g-i{animation-play-state:running}
.garden .is-flip .g-i{scale:-1 1;--dir:-1}

/* layers, back to front — opacity sets the depth, tempo and reach are per layer */
.garden__far{opacity:.24}
.garden__far .g-p{                                         /* the far trees don't sprout: they surface out of the mist */
  transform:translateY(calc((1 - var(--g)) * 48%)) scale(calc(.86 + .14 * var(--g)));
  opacity:clamp(0,var(--t) * 2,1);
}
.garden__far .g-i{animation:none}                          /* too far off for wind to show; saves a dozen animations */
.garden__mist{                                             /* the paper mist the far tree line rises out of */
  position:absolute;left:0;right:0;bottom:0;height:calc(var(--u) * 30);
  background:linear-gradient(to top,var(--paper,#F7F5F0) calc(var(--u) * 13),var(--paper-0));
}
.garden__mid{opacity:.5}
.garden__mid .g-i{--sd:9s;--amp:.4;--gust:.7}
.garden__hero{opacity:.94}
.garden__hero .g-i{--sd:12s;--amp:.3;--gust:.75}
.garden__hero .g-p:last-child .g-i{--sd:13.5s}
.garden__veil{                                             /* open sky: canopy tops dissolve into paper, and a soft clearing behind the words */
  background:
    linear-gradient(180deg,var(--paper,#F7F5F0) 0,rgba(247,245,240,.88) 5%,var(--paper-0) 21%),
    radial-gradient(ellipse 35% 31% at 50% 30%,rgba(247,245,240,.95) 0,rgba(247,245,240,.78) 48%,var(--paper-0) 100%);
}
.garden__ground{                                           /* a short band of soil under the bed, ending in exact --pine; it comes in with the meadow */
  position:absolute;left:0;right:0;bottom:0;height:calc(var(--u) * 4.5);
  background:linear-gradient(180deg,rgba(18,63,60,0) 0,rgba(18,63,60,.4) 30%,rgba(18,63,60,.82) 62%,var(--pine,#123F3C) 88%);
  opacity:clamp(0,(var(--p) - .08) * 4,1);
}
/* the back row: pale prints (the paleness is in the files, so their paper fills cover what is behind them),
   plus the ink-only columbine and seed grasses at 46%. They only take the gusts. */
.garden__back .g-ink .g-i{opacity:.46}
.garden__back .g-i{--gust:3.2;animation-name:none,g-gust}
.garden__bed .g-i{--sd:5.8s;--amp:1.2;--gust:2.8}
.garden__bed .g-p:nth-child(3n+1) .g-i{--sd:6.6s;--amp:1}
.garden__bed .g-p:nth-child(3n+2) .g-i{--sd:4.9s;--amp:1.5}
.garden__front .g-i{--sd:3.1s;--amp:2.6;--gust:6}
.garden__front .g-p:nth-child(4n+2) .g-i{--sd:2.6s;--amp:3.1}
.garden__front .g-p:nth-child(odd) .g-i{animation-name:none,g-gust}   /* every other tuft only takes the gusts */
/* the stage always ends in solid pine, whatever --p is, so it can never show a seam against the film band */
.garden__stage::after{
  content:'';position:absolute;left:0;right:0;bottom:0;z-index:2;height:max(12px,calc(var(--u) * 1.6));
  background:linear-gradient(180deg,rgba(18,63,60,0),var(--pine,#123F3C) 70%);pointer-events:none;
}

@keyframes g-sway{
  from{rotate:calc(var(--amp,1) * -1deg)}
  to{rotate:calc(var(--amp,1) * 1deg)}
}
/* a gust: calm for most of the cycle, then a push downwind (to the right), a rebound, a settle */
@keyframes g-gust{
  0%,56%,100%{transform:skewX(0deg)}
  63%{transform:skewX(calc(var(--gust,2) * var(--dir,1) * -1deg))}
  70%{transform:skewX(calc(var(--gust,2) * var(--dir,1) * .4deg))}
  77%{transform:skewX(calc(var(--gust,2) * var(--dir,1) * -.16deg))}
  85%{transform:skewX(0deg)}
}

/* ---------------------------------------------------------------- leaves and blossoms on the wind (only once grown) */
.garden__air{opacity:clamp(0,(var(--p) - .94) * 16,1);visibility:hidden;transition:opacity .9s}
.garden.is-live .garden__air{visibility:visible}             /* never frozen mid-air: without JS, or while paused off-screen */
.garden .g-leaf{
  position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * var(--u));opacity:0;
  animation:g-fall var(--gc) linear calc(var(--x) * var(--gx) - var(--gc) + var(--ld,0s)) infinite paused;
}
.garden .g-leaf.is-adrift{animation:g-fall var(--lp) linear var(--ld) infinite paused}   /* its own clock, out of step with the gusts */
.garden .g-leaf img{display:block;width:100%;height:auto;max-width:none;animation:g-flutter var(--lf,1.6s) ease-in-out infinite alternate paused}
@keyframes g-fall{            /* loosed as the gust passes (63%), carried downwind, gone before the next */
  0%,59%{opacity:0;transform:translate(0,0) rotate(var(--r0,0deg))}
  62%{opacity:.9}
  70%{transform:translate(calc(var(--dx) * var(--u) * .2),calc(var(--dy) * var(--u) * .06)) rotate(calc(var(--r0,0deg) + 80deg))}
  79%{transform:translate(calc(var(--dx) * var(--u) * .45),calc(var(--dy) * var(--u) * .3)) rotate(calc(var(--r0,0deg) + 160deg))}
  88%{opacity:.8;transform:translate(calc(var(--dx) * var(--u) * .7),calc(var(--dy) * var(--u) * .6)) rotate(calc(var(--r0,0deg) + 250deg))}
  100%{opacity:0;transform:translate(calc(var(--dx) * var(--u)),calc(var(--dy) * var(--u))) rotate(calc(var(--r0,0deg) + 340deg))}
}
@keyframes g-flutter{from{transform:scaleY(1) skewX(0deg)}to{transform:scaleY(.55) skewX(14deg)}}
.garden .g-drift{
  position:absolute;left:-3%;top:calc(var(--y) * 1%);width:calc(var(--w) * var(--u));opacity:0;
  animation:g-drift var(--d,30s) linear var(--dl,0s) infinite paused;
}
.garden .g-drift img{display:block;width:100%;height:auto;max-width:none;animation:g-tumble var(--td,6s) ease-in-out infinite alternate paused}
@keyframes g-drift{
  0%{transform:translate(0,0);opacity:0}
  8%{opacity:.75}
  35%{transform:translate(38vw,calc(var(--u) * -5))}
  70%{transform:translate(76vw,calc(var(--u) * 4))}
  92%{opacity:.7}
  100%{transform:translate(108vw,calc(var(--u) * -2));opacity:0}
}
@keyframes g-tumble{
  from{rotate:-35deg;translate:0 calc(var(--u) * -1.2)}
  to{rotate:55deg;translate:0 calc(var(--u) * 1.4)}
}
.garden.is-live .g-leaf,.garden.is-live .g-leaf img,
.garden.is-live .g-drift,.garden.is-live .g-drift img{animation-play-state:running}
/* after a minute without scrolling the wind drops: everything holds still and the air empties (garden.js, IDLE) */
.garden.is-idle .g-i,.garden.is-idle .g-leaf,.garden.is-idle .g-leaf img,
.garden.is-idle .g-drift,.garden.is-idle .g-drift img{animation-play-state:paused}
.garden.is-idle .garden__air{opacity:0}

/* ---------------------------------------------------------------- 4:3-ish screens (1024×768, iPad landscape): a wider clearing */
@media (min-width:641px) and (max-aspect-ratio:3/2){
  .garden .g-p{left:calc(var(--xt,var(--x)) * 1%);height:calc(var(--ht,var(--h)) * var(--u))}
  .garden__veil{
    background:
      linear-gradient(180deg,var(--paper,#F7F5F0) 0,rgba(247,245,240,.88) 5%,var(--paper-0) 21%),
      radial-gradient(ellipse 46% 36% at 50% 30%,rgba(247,245,240,.95) 0,rgba(247,245,240,.8) 50%,var(--paper-0) 100%);
  }
}
/* tablets held upright: a larger statement over the same garden */
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){
  .mission-band.garden .mission-words,.mission-band.garden .mission-sig{font-size:clamp(1.6rem,4.3vw,2.6rem)}
}

/* ---------------------------------------------------------------- phones: statement on top, fewer and larger plants below */
@media (max-width:640px){
  .mission-band.garden{--pin:28vh;--u:min(1vh,2.1vw)}
  @supports (height:100svh){.mission-band.garden{--pin:28svh;--u:min(1svh,2.1vw)}}
  .mission-band.garden .mission-inner{padding-top:clamp(4.6rem,11.5vh,6.5rem)}
  .mission-band.garden .mission-words{max-width:none;font-size:clamp(1.42rem,6.1vw,2.1rem);line-height:1.2}
  .mission-band.garden .mission-sig{width:auto;justify-content:center;margin-top:1.15rem}
  .mission-band.garden .mission-sig img{width:180px}
  .garden .g-hide-sm{display:none}
  .garden .g-p{left:calc(var(--xs,var(--x)) * 1%);height:calc(var(--hs,var(--h)) * var(--u));bottom:calc(var(--bs,var(--b,0)) * var(--u))}
  .garden .g-leaf{left:calc(var(--xs,var(--x)) * 1%);top:calc(var(--ys,var(--y)) * 1%)}
  .garden__veil{
    background:
      linear-gradient(180deg,var(--paper,#F7F5F0) 0,rgba(247,245,240,.88) 4%,var(--paper-0) 16%),
      radial-gradient(ellipse 78% 30% at 50% 28%,rgba(247,245,240,.96) 0,rgba(247,245,240,.82) 55%,var(--paper-0) 100%);
  }
}

/* ---------------------------------------------------------------- reduced motion: the garden is simply there, grown and still */
@media (prefers-reduced-motion:reduce){
  .mission-band.garden{--p:1 !important;height:var(--stage) !important}
  .mission-band.garden .garden__rig{height:var(--stage) !important}
  .mission-band.garden .garden__art{position:relative !important}
  .garden .g-i,.garden .g-leaf,.garden .g-leaf img,.garden .g-drift,.garden .g-drift img{animation:none !important}
  .garden__air{display:none}
}