/* ── the footer: obsidianassembly.com's (MainFooter), measured on their page
   at 1920 (a 1905 px wide footer) and set in container units of the footer's
   width, so it scales the same; 1cqw = 19.05 px there, every number is their
   px / 19.05.

     card     a rounded panel (54 px corners) 44 px in from each side, its own
              curve drawn across it and a gradient to the second paper colour
              at the bottom; a four-point star rises out of its top edge and
              hangs from its bottom edge
     inside   a short line top left, a social line just above the top right,
              three staggered serif lines low left, five huge links laid on a
              staggered grid, and a row of small print along the bottom
     links    on hover each letter slides up out of view while a copy of it
              swings in from below (rotated 60deg, scaled 1.5 -> upright), the
              later letters slower (.9 s + .15 s per letter), and the little
              cross before the word turns half a turn
     after    under the card: the wordmark, a slash and two short notes, which
              rise into place and fade in as the page reaches its end
   Colours: their black -> crimson, their white -> cream, their yellow and
   gold -> the second paper and crimson. Fonts: Reckless Neue for their
   OT Jubilee and Voyage, ReplicaLL for Switzer. */
/* the three faces it uses (also in css/rk.css, but pages without his sections need them) */
.ob-foot {
  --ob-c: #2a4254; --ob-p: #f7f3ee; --ob-p2: #f7f3ee;
  container-type: inline-size; position: relative; overflow: hidden; z-index: 40;
  padding-top: 12.6cqw;                                            /* 240 */
  color: var(--ob-c); font: 400 1.155cqw / 1.3 var(--f-body);
}
.ob-foot-under { position: absolute; inset: 0; background: var(--ob-c); }

.ob-foot-card {
  position: relative; z-index: 50; margin: 0 2.31cqw; height: 40.52cqw;          /* 44, 772 */
  border-radius: 2.82cqw;                                                       /* 53.7 */
  background-color: var(--ob-p);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1340 400' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23a00034' stroke-opacity='.55' stroke-width='1' vector-effect='non-scaling-stroke' d='M1306.2,0c233.2,76.7-985.6,21.7-563.8,82,241.5,34.5,342.4,106.4,426.6,157.3,69,41.7,124.5,48.5,132.8,34,48.1-83.9-1163.8-65.7-981.8,57.5C441.3,413,334.6,421.9,0,357.7'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--ob-p) 60%, var(--ob-p2));
  background-repeat: no-repeat, no-repeat; background-size: 96% 80%, 100%;
}
/* the stars: their four-point mask, half above the card, half below it */
.ob-foot-card::before, .ob-foot-card::after {
  content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; z-index: 1;
  width: 6vw; height: 3vw;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,0c0,27.6,22.4,50,50,50-27.6,0-50,22.4-50,50,0-27.6-22.4-50-50-50,27.6,0,50-22.4,50-50Z'/%3E%3C/svg%3E") 50% 0 / 100% auto no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,0c0,27.6,22.4,50,50,50-27.6,0-50,22.4-50,50,0-27.6-22.4-50-50-50,27.6,0,50-22.4,50-50Z'/%3E%3C/svg%3E") 50% 0 / 100% auto no-repeat;
}
.ob-foot-card::before { bottom: calc(100% - 1px); background: var(--ob-p); }
.ob-foot-card::after { top: calc(100% - 1px); background: var(--ob-p2); -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }

.ob-foot-card > * { position: absolute; margin: 0; }
.ob-foot a { color: inherit; text-decoration: none; }
.ob-foot-social { right: 1.155cqw; top: -1.155cqw; translate: 0 -100%; color: var(--ob-p); font-size: .739cqw; line-height: 1.3; text-align: right; }   /* 14 px */
.ob-foot-indep { left: 1.155cqw; top: 1.47cqw; width: 13.8cqw; font: 400 1.155cqw / 1.3 var(--f-head); }
.ob-foot-oper { left: 8.03cqw; top: 21.78cqw; font: 400 2.2556cqw / 1.1557 var(--f-head); }
.ob-foot-oper span { display: block; }
.ob-foot-oper span:nth-child(2) { margin-left: 1em; }
.ob-foot-oper span:nth-child(3) { margin-left: 1.5em; }

.ob-foot-nav a {
  position: absolute; overflow: hidden; display: flex; flex-wrap: nowrap;
  padding: 0 1.155cqw .37cqw; border-radius: 1.155cqw;
  font: 400 5.507cqw / 1.1112 var(--f-head); letter-spacing: -.02em; white-space: nowrap;   /* 104.9 / 116.6 */
}
.ob-f-1 { left: 39.06cqw; top: 1.47cqw; }       /* their Places   788, 28  */
.ob-f-2 { left: 55.17cqw; top: 8.66cqw; }       /* Objects       1095, 165 */
.ob-f-3 { left: 31.02cqw; top: 15.91cqw; }      /* About          635, 303 */
.ob-f-4 { left: 63.2cqw;  top: 15.91cqw; }      /* Contacts      1248, 303 */
.ob-f-5 { left: 47.14cqw; top: 23.15cqw; }      /* People         942, 441 */
.ob-foot-nav { position: static; }
.ob-foot-nav a::before {                         /* their cross, 14 px, left of the word */
  content: ""; position: absolute; left: 0; bottom: 2.2556cqw; width: .739cqw; height: .739cqw;
  background:
    linear-gradient(0deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(90deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
  transition: transform .9s cubic-bezier(.35, .35, 0, 1);
}
.ob-foot-nav a:hover::before { transform: rotate(-180deg); }
.ob-ch { position: relative; display: inline-block; translate: 0 0; transition: translate calc(.9s + var(--i) * .15s) cubic-bezier(.35, .35, 0, 1); }
.ob-ch::after {
  content: attr(data-c); position: absolute; inset: 0; display: inline-block;
  rotate: 60deg; scale: 1.5; transform-origin: 0 100%; translate: 0 105%;
  transition: scale calc(.9s + var(--i) * .15s) cubic-bezier(.35, .35, 0, 1), rotate calc(.9s + var(--i) * .15s) cubic-bezier(.35, .35, 0, 1);
}
.ob-foot-nav a:hover .ob-ch { translate: 0 -105%; }
.ob-foot-nav a:hover .ob-ch::after { rotate: 0deg; scale: 1; }

.ob-foot-copy { left: 1.155cqw; top: 37.85cqw; font-size: .924cqw; }                       /* 17.6 */
.ob-foot-expr { left: 32.18cqw; top: 36.64cqw; width: 14.96cqw; font-size: .924cqw; }
.ob-foot-cred { left: 56.33cqw; top: 37.85cqw; font-size: .924cqw; }

.ob-foot-after { position: relative; height: 15.43cqw; margin: 0 2.31cqw; color: var(--ob-p); }   /* 294 */
.ob-foot-after > * {
  position: absolute; top: 4.41cqw; margin: 0;
  opacity: calc(-5 + var(--progress, 1) * 6);
  transform: translate3d(0, calc(-5.507cqw + var(--progress, 1) * 5.507cqw), 0);
}
.ob-foot-mark { left: 0; font: 400 1.9cqw / 1.6 var(--f-script); color: var(--ob-p); padding-top: .4em; margin-top: -1.2em; }
.ob-foot-slash { left: 16.12cqw; font-size: .924cqw; color: rgb(247 243 238 / .4); }
.ob-foot-ip1 { left: 32.18cqw; width: 14.96cqw; font-size: 1.155cqw; }
.ob-foot-ip1 a { color: rgb(247 243 238 / .6); }
.ob-foot-ip2 { left: 56.33cqw; width: 23cqw; font-size: .924cqw; color: rgb(247 243 238 / .4); }

/* phones: the card stacks */
@media (max-width: 767px) {
  .ob-foot { padding-top: 16cqw; font-size: 3.6cqw; }
  .ob-foot-card { height: auto; margin: 0 4cqw; border-radius: 6cqw; padding: 8cqw 6cqw; display: flex; flex-direction: column; gap: 6cqw; }
  .ob-foot-card::before, .ob-foot-card::after { width: 24vw; height: 12vw; }
  .ob-foot-card > * { position: relative; left: auto; right: auto; top: auto; width: auto; translate: none; }
  .ob-foot-social { position: absolute; top: -2cqw; right: 6cqw; translate: 0 -100%; font-size: 3cqw; }
  .ob-foot-indep { font-size: 4.2cqw; width: 60%; }
  .ob-foot-oper { font-size: 7cqw; order: 3; }
  .ob-foot-nav { display: flex; flex-direction: column; gap: 1cqw; order: 2; }
  .ob-foot-nav a { position: relative; left: auto; top: auto; font-size: 13cqw; padding: 0 0 0 4cqw; margin-left: -1cqw; }
  .ob-foot-nav a::before { width: 2.4cqw; height: 2.4cqw; bottom: 5cqw; }
  .ob-foot-nav .ob-f-2 { margin-left: 14cqw; } .ob-foot-nav .ob-f-4 { margin-left: 24cqw; }
  .ob-foot-copy, .ob-foot-expr, .ob-foot-cred { font-size: 3.4cqw; order: 4; }
  .ob-foot-after { height: auto; margin: 0 6cqw; padding: 12cqw 0 8cqw; display: flex; flex-direction: column; gap: 3cqw; }
  .ob-foot-after > * { position: relative; left: auto; top: auto; width: auto; }
  .ob-foot-mark { font-size: 10cqw; margin: 0; }
  .ob-foot-slash { display: none; }
  .ob-foot-ip1 { font-size: 4cqw; } .ob-foot-ip2 { font-size: 3.4cqw; }
}
@media (prefers-reduced-motion: reduce) { .ob-ch, .ob-ch::after, .ob-foot-nav a::before { transition: none; } .ob-foot-after > * { opacity: 1; transform: none; } }