@font-face{ font-family:'UnboundedW'; src:url('/site/fonts/UnboundedW.woff2') format('woff2'); font-weight:200 900; font-display:swap }
footer{ background:#20103A; color:#8F82A8; padding:0 0 2.6rem; margin-top:0; --sans:Body,system-ui,sans-serif; --amber:#E8A84C; --amber-soft:#F2C98A; --amethyst:#A98FE0 }
footer .wrap{ padding:0 clamp(20px,5vw,72px) }
/* Never taller than the window. Jesse, 22 Sep: "the footer is cutting off". The stage was a
   fixed 880px at 2000 wide, and his window shows about 513px, so no scroll position could show
   the pair whole. Height is now capped by the viewport as well; the plate stays anchored to
   their feet, so what a short window loses is the bar's top, never the pair. */
.foot-scene{ position:relative; min-height:clamp(400px,min(54vw,100svh - 58px),880px); display:flex; align-items:flex-end; justify-content:center; padding:0 clamp(1rem,7vw,6rem); overflow:hidden; --lit:0 }
/* v11, rendered 13 Sep 2026 from the W-1 master (afedcfad) and the Ryan Rhino master
   (2a8fe23e) passed as image references, never described, into this same room. v9's bot was
   smooth and ceramic; the locked W-1 is honey carved pine with bold dark grain. v10 tried to
   fix that by compositing the right characters over v9 and leaving the old ones underneath,
   which is where the second head came from. Neither is used now.
   Anchored to the BOTTOM of the plate, not its centre. WonderBot's boots and the rhino's
   feet sit at 90-95% of the plate height, and a centred cover crop cuts everything below
   92%, so both characters were sliced off at the ankles. Anchoring low spends the crop on
   empty ceiling brick instead, which is what the crop should always cost. */
.foot-scene::before{ content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(50% 62% at 50% 96%, rgba(232,168,76,.16), transparent 66%), url('/site/assets/footer-bar-v12.jpg?v=7cdfdf4c') center bottom/cover;
  filter:brightness(calc(.74 + .40 * var(--lit))) contrast(calc(.98 + .08 * var(--lit))) saturate(calc(.80 + .28 * var(--lit)));
  transform:scale(calc(1.05 - .05 * var(--lit))); transition:filter .2s linear, transform .3s linear }
/* v12, 18 Sep 2026. Jesse: "the robot still faces the wrong way, it should be his back and
   the moon should be on the helmet", then of this plate, "that's better yes". Made from the
   v11 plate as the scene and the same two masters as references: both stand at the bar with
   their backs to us, and the Wonder moon is lit on the back of his helmet. The pair were
   rendered up close, so the plate is drawn as a plain cover crop anchored to the floor; the
   1.25 times enlargement v11 needed would put his helmet under the lockup.
   The moon lights as the footer scrolls in: the crescent, the bead on the antenna, a spill
   onto the helmet. Cut from the v12 plate itself (footer-visor-v12.png), with the helmet's
   specular highlight left out, and screened on, so nothing is drawn over the plate except
   light. It shares the plate's size and anchor so it tracks the helmet at every width. */
.fs-visor{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:none, url('/site/assets/footer-visor-v12.png?v=ad56f01b') center bottom/cover no-repeat;
  mix-blend-mode:screen; opacity:var(--lit); transition:opacity .5s ease }
@media (prefers-reduced-motion:reduce){ .fs-visor{ opacity:1; transition:none } }
.foot-scene::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(32,16,58,.92) 0%,rgba(32,16,58,.34) 14%,transparent 32%,transparent 70%,rgba(32,16,58,.22) 100%),
    linear-gradient(90deg,rgba(32,16,58,.85) 0%,rgba(32,16,58,0) 9%,rgba(32,16,58,0) 91%,rgba(32,16,58,.85) 100%) }
.fs-sky{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:var(--lit); transition:opacity .3s linear }
.fs-star{ position:absolute; left:var(--x); top:var(--y); width:3px; height:3px; border-radius:50%; background:#F4F1EA; opacity:.35; animation:tw 3.4s ease-in-out var(--d) infinite }
@keyframes tw{ 0%,100%{opacity:.18} 50%{opacity:.9} }
.fh-overlay{ position:absolute; left:0; right:0; top:clamp(1.4rem,5vw,3rem); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.7rem; pointer-events:none; opacity:var(--logo,0); transform:translateY(calc(14px - 14px * var(--logo,0))); transition:opacity .45s ease, transform .45s ease }
/* The plate is cover-cropped differently at every width, so the lockup cannot rely on
   landing somewhere dark. It carries its own falloff and is legible at any crop. */
.fh-overlay::before{ content:""; position:absolute; z-index:-1; left:50%; top:50%; width:min(164%,1560px); height:300%; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(52% 50% at 50% 50%, rgba(26,12,48,.94) 0%, rgba(26,12,48,.86) 30%, rgba(26,12,48,.52) 56%, rgba(26,12,48,.18) 76%, transparent 88%) }
/* width/height restored from the canonical airtree stage: height:auto overrides the
   inline height mark.js writes, so the mark scales from its width and cannot distort. */
.fs-mark{ width:min(500px,58vw); height:auto !important;
  filter:drop-shadow(0 2px 12px rgba(26,12,48,.95)) drop-shadow(0 0 48px rgba(26,12,48,.8)) }
/* On a short, wide stage the helmet reaches the top of the frame, so the lockup leaves the
   centre for the top left corner, over the bar's shelves, and comes down in size. */
@media (min-width:900px) and (max-height:760px){
  .fh-overlay{ left:clamp(20px,5vw,72px); right:auto; align-items:flex-start }
  .fs-mark{ width:min(340px,26vw) }
  .fh-overlay::before{ width:min(220%,1100px) }
  /* a stage this short shows about 60% of the plate's height and the pair need 66%: anchored
     a touch above the floor, the moon and the face stay whole and only the cap of the helmet
     and the shadow under the boots go */
  .foot-scene::before, .fs-visor{ background-position:center, center 90% }
}
/* At the foot, not under the mark. WonderBot's helmet reaches the middle of the frame, so a
   line directly beneath the lockup lands across his head. The locked poster grammar puts the
   one tracked caps line at the foot anyway, over floor, where nothing collides with it. */
/* The moon rises out of the frame edge and lights as the footer comes into view, driven by
   --lit from site/wonder.js. It was still on /airtree/ and had never been carried across to
   the site footer, which is why the robot stood in an unlit room. */
.fh-moon{ position:absolute; right:clamp(1.5rem,9vw,9rem); top:clamp(1rem,4vw,2.6rem); z-index:2;
  width:clamp(40px,6vw,78px); transform:translateY(calc(70px - 70px * var(--lit,0))); opacity:var(--lit,0);
  filter:drop-shadow(0 0 calc(30px * var(--lit,0)) rgba(169,143,224,.85));
  transition:transform .3s linear, opacity .25s linear }
@media (prefers-reduced-motion:reduce){ .fh-moon{ transition:none } }
.fh-tag{ position:absolute; left:0; right:0; bottom:7%; z-index:3; margin:0; text-align:center;
  pointer-events:none; opacity:var(--logo,0); transition:opacity .45s ease;
  font-family:'UnboundedW',var(--sans); font-weight:200; font-size:clamp(.72rem,1.1vw,.68rem);
  letter-spacing:.3em; text-transform:uppercase; color:var(--amber-soft);
  text-shadow:0 1px 14px rgba(26,12,48,.95), 0 0 34px rgba(26,12,48,.8) }
/* Shallower and later than it was. At 34% with the old ramp this reached 90% opacity
   across the band the characters stand in, so it finished off whatever the crop had not
   already taken. It now only turns solid in the last few percent, below their feet. */
.fs-ground{ position:absolute; left:0; right:0; bottom:0; height:24%; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(32,16,58,0) 0%,rgba(32,16,58,.08) 50%,rgba(32,16,58,.35) 80%,rgba(32,16,58,.80) 94%,#20103A 100%) }
@media (max-width:640px){ .foot-scene{ min-height:340px; padding:0 1rem } }
.foot-grid{ display:grid; gap:1.8rem 2.4rem; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); padding-top:3rem }
.foot-grid h3{ font:700 .72rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin:0 0 .5rem }
.foot-grid p{ font-size:.88rem; line-height:1.65; color:#CBBFE2; margin:0; max-width:none }
.foot-grid a{ color:var(--amethyst) }
.foot-line{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.6rem; padding-top:1.2rem; border-top:1px solid rgba(169,143,224,.18); font-size:.72rem; letter-spacing:.06em; color:#8F82A8 }
.foot-line p{ margin:0 }