/* GENERATED by docs/design/frames/pages.mjs from rest.css's footer block (the one source); never edit here. */
/* ===== the footer: spec-r11 B "The last stop" (FROZEN 2026-11-05) ===== */
/* On ink, full width, the words in the draft's order (docs/drafts/footer-pages.md's footer block): the name, the contact,
   the four links, the copyright; laid out links first. With scripting on, the footer's ::after is the room of the name in
   dots (foot-dots.js draws it there, with the line, the sphere and its rings, on a canvas behind the words, cleared
   behind every line of them); scripting off, the field is absent and the words stand alone (§7). The links keep one
   place at every width, the footer's top padding, even where the sphere comes under them (his ask, 2026-11-05: "they
   should always keep their position, even if it goes over the sphere"; the sketch dropped them under the sphere below
   1024). */
#foot { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "links ." "contact ." "name copy"; row-gap: 36px; align-items: end;
  padding: clamp(120px, 16vh, 200px) var(--pad) calc(56px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--mute-on-ink); font-size: 14px; line-height: 1.5; }
#foot p { margin: 0; }
#foot > p:nth-of-type(1) { grid-area: name; }
#foot > p:nth-of-type(2) { grid-area: contact; font-size: 17px; }
#foot > p:nth-of-type(3) { grid-area: copy; justify-self: end; text-align: right; }
#foot strong { color: var(--on-ink); }
#foot a { color: var(--on-ink); }
#foot > p a { font-weight: 700; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
#foot nav { grid-area: links; }
#foot ul { margin: 0; padding: 0; list-style: none; }
#foot li { width: max-content; max-width: 100%; }
#foot nav a { display: flex; align-items: center; gap: 18px; font-size: clamp(30px, 3.8vw, 56px); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.18; text-decoration: none; }
/* the dotted lead that draws out on hover and focus, the line's dot */
#foot nav a::after { content: ""; flex: none; width: 0; height: 2.3px;
  background: linear-gradient(90deg, var(--blue-on-ink) 2.3px, transparent 2.3px) 0 50% / 7px 2.3px repeat-x; transition: width .4s cubic-bezier(.2, .8, .2, 1); }
#foot nav a:hover::after, #foot nav a:focus-visible::after { width: clamp(40px, 6vw, 96px); }
#foot :focus-visible { outline: 2px solid var(--link-on-ink); outline-offset: 3px; }
#foot > :not(canvas) { position: relative; z-index: 1; }
#foot > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.js #foot { padding-bottom: calc(clamp(20px, 3vh, 40px) + env(safe-area-inset-bottom, 0px)); }
.js #foot::after { content: ""; grid-column: 1 / -1; height: clamp(96px, 17vw, 300px); margin-top: clamp(12px, calc(7vh - 36px), 60px); }
@media (max-width: 1023px) {
  #foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "links" "contact" "name" "copy"; row-gap: 24px; }
  #foot > p:nth-of-type(3) { justify-self: start; text-align: left; }
}
@media (max-width: 760px) {
  .js #foot::after { height: 44vw; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { #foot nav a::after { transition: none; } }