/* The site footer (Rex, 2026-09-21). Markup and the story behind it:
   _includes/footer.njk. Mock and overlap check: design/prototypes/footer/.
   Its own file because site.css is past the 500-line cap
   (.claude/rules/session-discipline.md). Tokens only, one pinned size noted
   below. */

/* The footer is the size container: every position in the tub is a fraction
   of the page width (cqw), so the picture scales as one piece. */
.foot { background: var(--bg); color: var(--ink); overflow: hidden; container-type: inline-size; }

/* One grid cell holds both layers: the text row at the top and the tub at the
   bottom, overlapping so the limbs rise beside the text. */
.foot-in { display: grid; }
.foot-top, .foot-tub { grid-area: 1 / 1; }
.foot-top { position: relative; z-index: 2; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 7cqw var(--gutter) calc(48.1cqw * var(--s) + var(--sp-32)); }
/* That bottom padding is how high the leg reaches above the tub's floor:
   48.1cqw at full size (the toe, measured 2026-09-24), times
   --s because the limbs shrink in steps below 1400. It makes the text row
   claim the space the leg needs, so the gap between the text and the toe is
   one --sp-32 at every width and a taller row pushes the tub down instead of
   into the form. The hand is left out on purpose: it rises to the right of
   the text, where the links were. The tub and the grid carry no height of their
   own for the same reason: a fixed one left a gap that grew as the limbs
   shrank (Rex: "it gets wider"). */

/* The newsletter sign-up on the paper, no panel, and the credit under it
   (Rex, 2026-09-24: "it can go underneath the email aligned left"). The page
   links left the footer the same day; the masthead carries them. */
.foot-cta .label { display: block; color: var(--red); margin: 0 0 var(--sp-24); }
.foot-cta-head { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-32); line-height: 1.1;
  letter-spacing: -.02em; max-width: 26ch; margin: 0 0 var(--sp-40); }
.foot-cta-head em { font-style: normal; color: var(--ink50); }
/* The field is a box a shade darker than the paper, the current ink at 5
   percent (Rex, 2026-09-24: the 9 percent ground tint read too dark, "softer
   color"), beside the site's .vbtn at the same height. */
.nl-form { display: flex; align-items: stretch; gap: var(--sp-8); width: min(48rem, 100%); margin: 0; }
.nl-field { flex: 1; min-width: 0; border: 0; border-radius: 0; background: color-mix(in srgb, currentColor 5%, transparent);
  padding: 0 var(--sp-16); font-family: var(--font-body); font-size: var(--fs-16); color: inherit; outline: none; }
.nl-field::placeholder { color: var(--ink50); opacity: 1; }
.nl-field:focus-visible { box-shadow: inset 0 0 0 2px currentColor; }
.nl-form .vbtn { border: 0; cursor: pointer; flex: none; }
.nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Its type is the page's body text, inherited (Rex, 2026-10-03: "this success
   text should not be in mono. it should be in our body"). It wore .caption
   until then, which is mono on the v2 pages. Only the placement is set here.
   It holds one line empty, so an answer moves nothing. */
.nl-msg { margin: var(--sp-8) 0 0; min-height: 1.4em; max-width: 48rem; }
.nl.done .nl-form { display: none; }

/* Spellbook's credit: body face, sentence case, the muted ink that clears AA.
   Pinned at 12px, the one exception to the type scale here: --fs-12 rides the
   site's rem, which grows on wide screens, and Rex asked for it "as small as
   it is on spellbook", which stays 12. */
.foot-credit { justify-self: start; margin: var(--sp-24) 0 0; font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--ink50); }

/* The tub is the top plane (Rex: "let the foot and drink live on the top z
   plane so they cross over the stuff"). Nothing in it takes a click, so a
   link or button under a limb still works. */
.foot-tub { position: relative; z-index: 3; align-self: end; height: calc(54cqw * var(--s)); pointer-events: none; }
.foot-tub * { pointer-events: none; }
/* The wordmark, flush to the page end with its bottom quarter cut off: the
   box is 3/4 of the mark's height (125 of 167, at 1324 wide), and the mask is
   pinned to the top so the rest falls outside it. Artificially Seasoned since
   2026-10-06 (D-190); logo.svg, the old mark, still feeds the email footer art. */
.foot-mark { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1324 / 125; background: var(--red);
  -webkit-mask: url(/assets/logos/artificially-seasoned.svg) top left / 100% auto no-repeat;
  mask: url(/assets/logos/artificially-seasoned.svg) top left / 100% auto no-repeat; }
.foot-tub img { position: absolute; display: block; height: auto; }

/* Sizes step down as the window narrows, because the type keeps its size
   while the art scales with the page: from 1399px down the full-size shoe
   touched the headline (measured). Each limb scales about the point where it
   leaves the page: the leg's cut edge at 67cqw, the hand's forearm at
   77.95cqw. Stacked on a phone the tub has the width to itself, so the limbs
   come back up past full size (Rex: "and then back bigger at this size"). */
.foot { --s: 1; }
@media (max-width: 1399px) { .foot { --s: .85; } }
@media (max-width: 1080px) { .foot { --s: .72; } }
@media (max-width: 920px)  { .foot { --s: .6; } }
/* --leg-x nudges the leg left on wide screens only (Rex, 2026-09-24: "move
   the leg to the left a little bit on wide screens"). */
.foot { --leg-x: 0cqw; }
@media (min-width: 1400px) { .foot { --leg-x: 3cqw; } }
.foot-leg  { width: calc(52cqw * var(--s)); left: calc(67cqw - 52cqw * var(--s) - var(--leg-x)); bottom: calc(-3.7cqw * var(--s)); transform-origin: 70% 100%; }
/* The hand sits 17cqw higher than the comp, showing more arm, now that no
   links share its side (Rex, 2026-09-24: "move the drink arm up higher"). */
.foot-hand { width: calc(50.3cqw * var(--s)); left: calc(77.95cqw - 25.15cqw * var(--s)); bottom: calc(-9.2cqw * var(--s)); transform-origin: 50% 100%; }

/* Once, when the tub comes into view: the leg kicks up out of the water, the
   hand follows a beat later with the glass. Reduced motion shows the finished
   picture. */
@media (prefers-reduced-motion: no-preference) {
  .foot-leg  { transform: translateY(60%) rotate(-12deg); }
  .foot-hand { transform: translateY(70%); }
  .foot-tub.go .foot-leg  { transform: none; transition: transform 1s var(--ease-out); }
  .foot-tub.go .foot-hand { transform: none; transition: transform 1.1s cubic-bezier(.34, 1.2, .64, 1) .25s; }
}

/* Hover: one gentle sway, back and forth and settle, about the point where the
   limb leaves the page (footer.njk adds .sway when the mouse reaches a painted
   pixel). It moves `rotate`, not `transform`, so it composes with the entrance
   instead of fighting it. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .foot-tub .sway { animation: foot-sway 1.6s ease-in-out; }
}
@keyframes foot-sway {
  0%, 100% { rotate: 0deg; }
  25% { rotate: 3deg; }
  60% { rotate: -2.5deg; }
  85% { rotate: 1deg; }
}

/* A phone: the text stacks and the tub takes its own room below it. */
@media (max-width: 760px) {
  .foot { --s: 1.25; }
  .foot-in { display: block; min-height: 0; }
  .foot-top { padding-top: var(--sp-64); padding-bottom: 0; }
  .foot-cta-head { font-size: var(--fs-24); }
  .nl-form { width: 100%; }
  .foot-tub { height: 68cqw; margin-top: var(--sp-32); }
}