/* that's a wrap — thank-you footer (ref: Group 2, 1672 x 718) */
#thanks{position:relative;width:100%;height:calc(718 * var(--u));overflow:hidden}
#thanks .stage{position:absolute;left:calc(50% - var(--stage-w) / 2);top:0;
  width:var(--stage-w);height:calc(718 * var(--u))}
#thanks .stage > *{position:absolute}

#thanks .eyebrow{left:calc(150 * var(--u));top:calc(60 * var(--u))}
#thanks .title{left:calc(150 * var(--u));top:calc(150 * var(--u));font-family:var(--serif);font-weight:400;
  font-size:calc(78 * var(--u));line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#1A140C;white-space:nowrap}
#thanks .rule{left:calc(150 * var(--u));top:calc(250 * var(--u));width:calc(73 * var(--u));height:calc(2 * var(--u));background:#2A2119}
#thanks .para{left:calc(150 * var(--u));top:calc(287 * var(--u));font-family:var(--mono);
  font-size:max(var(--mt,0px), calc(15 * var(--u)));line-height:max(calc(var(--mt,0px) * 1.42), calc(25.5 * var(--u)));letter-spacing:0;color:#3D3226;white-space:nowrap}
#thanks .heart{left:calc(150 * var(--u));top:calc(414 * var(--u));width:calc(40 * var(--u));height:calc(40 * var(--u));
  stroke:#9A3A22;stroke-width:2.8}
#thanks .see{left:calc(216 * var(--u));top:calc(398 * var(--u));font-size:calc(31 * var(--u));
  transform:rotate(-12deg);transform-origin:0 100%}
#thanks .see-u{left:calc(261 * var(--u));top:calc(446 * var(--u));width:calc(108 * var(--u));height:calc(18 * var(--u));stroke-width:2.6}

#thanks .cat{left:calc(762 * var(--u));top:calc(244 * var(--u));width:calc(906.7 * var(--u));height:calc(290.4 * var(--u))}
#thanks .cat video{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
#thanks .cat canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;visibility:hidden}
#thanks .cat.live canvas{visibility:visible}
#thanks .cat-ph{position:absolute;left:12%;right:4%;top:28%;bottom:10%;display:grid;place-items:center;
  border:calc(1.4 * var(--u)) dashed rgba(60,44,30,.25);border-radius:50% / 40%;
  font-family:var(--hand);font-size:calc(26 * var(--u));color:rgba(60,44,30,.45)}
#thanks .cat.live .cat-ph{display:none}
#thanks .pops{left:calc(772 * var(--u));top:calc(282 * var(--u));width:calc(50 * var(--u));height:calc(60 * var(--u));stroke-width:2.6}
#thanks .n-cat{left:calc(1022 * var(--u));top:calc(104 * var(--u));font-size:calc(21 * var(--u));line-height:1.18;
  transform:rotate(-8deg);transform-origin:0 100%}
#thanks .a-cat{left:calc(1062 * var(--u));top:calc(196 * var(--u));width:calc(50 * var(--u));height:calc(70 * var(--u))}
#thanks .n-quote{left:calc(1330 * var(--u));top:calc(118 * var(--u));font-size:calc(24 * var(--u));line-height:1.2;
  transform:rotate(-12deg);transform-origin:0 100%}
#thanks .n-quote .q{position:absolute;left:calc(-28 * var(--u));top:calc(-4 * var(--u));font-size:1.4em}
#thanks .q-heart{left:calc(1430 * var(--u));top:calc(270 * var(--u));width:calc(30 * var(--u));height:calc(28 * var(--u));stroke:#9A3A22;stroke-width:2.4}
#thanks .q-line{left:calc(1413 * var(--u));top:calc(308 * var(--u));width:calc(70 * var(--u));height:calc(20 * var(--u));stroke-width:2.4}

#thanks .base{left:calc(150 * var(--u));top:calc(561 * var(--u));width:calc(1372 * var(--u));height:calc(1.2 * var(--u));
  background:rgba(60,44,30,.24)}
#thanks .copy{left:calc(150 * var(--u));top:calc(602 * var(--u));font-family:var(--mono);font-size:max(var(--mt,0px), calc(12.5 * var(--u)));
  letter-spacing:.02em;color:#3D3226;line-height:1.4;white-space:nowrap}
#thanks .top{left:auto;right:calc(150 * var(--u));top:calc(587 * var(--u));display:flex;align-items:center;gap:calc(26 * var(--u));
  font-family:var(--mono);font-size:max(var(--mt,0px), calc(12.5 * var(--u)));letter-spacing:.06em;text-transform:uppercase;color:#2A2119;white-space:nowrap}
#thanks .top i{display:grid;place-items:center;width:calc(44 * var(--u));height:calc(44 * var(--u));border-radius:50%;
  background:#A8472A;color:#FBEFE4;transition:transform .4s cubic-bezier(.2,.8,.3,1),background-color .3s ease}
#thanks .top svg{width:46%;height:46%}
@media (hover:hover) and (pointer:fine){ #thanks .top:hover i{background:#8E3A20} }
#thanks .top:focus-visible i{outline:2px solid var(--accent);outline-offset:3px}

/* ================= mobile: stacked, 530 wide ================= */
@media (max-width:860px){
  #thanks{height:calc(800 * var(--u))}
  #thanks .stage{height:calc(800 * var(--u));top:0}
  #thanks .eyebrow{left:calc(48 * var(--u));top:calc(64 * var(--u))}
  #thanks .title{left:calc(48 * var(--u));top:calc(96 * var(--u));font-size:calc(56 * var(--u));letter-spacing:.03em}
  #thanks .rule{left:calc(48 * var(--u));top:calc(166 * var(--u));width:calc(52 * var(--u))}
  #thanks .para{left:calc(48 * var(--u));top:calc(188 * var(--u));font-size:max(var(--mt,0px), calc(11.4 * var(--u)));line-height:max(calc(var(--mt,0px) * 1.42), calc(17.5 * var(--u)));letter-spacing:0}
  #thanks .heart{left:calc(48 * var(--u));top:calc(282 * var(--u));width:calc(32 * var(--u));height:calc(32 * var(--u))}
  #thanks .see{left:calc(96 * var(--u));top:calc(270 * var(--u));font-size:calc(25 * var(--u))}
  #thanks .see-u{left:calc(132 * var(--u));top:calc(306 * var(--u));width:calc(88 * var(--u));height:calc(15 * var(--u))}

  #thanks .n-cat{left:calc(238 * var(--u));top:calc(350 * var(--u));font-size:max(var(--mt,0px), calc(15.5 * var(--u)))}
  #thanks .a-cat{left:calc(262 * var(--u));top:calc(408 * var(--u));width:calc(34 * var(--u));height:calc(48 * var(--u))}
  #thanks .n-quote{left:calc(392 * var(--u));top:calc(352 * var(--u));font-size:max(var(--mt,0px), calc(15.5 * var(--u)))}
  #thanks .q-heart{left:calc(452 * var(--u));top:calc(452 * var(--u));width:calc(20 * var(--u));height:calc(19 * var(--u))}
  #thanks .q-line{left:calc(440 * var(--u));top:calc(476 * var(--u));width:calc(46 * var(--u));height:calc(14 * var(--u))}
  #thanks .cat{left:calc(64 * var(--u));top:calc(476 * var(--u));width:calc(470 * var(--u));height:calc(150.5 * var(--u))}
  #thanks .pops{left:calc(70 * var(--u));top:calc(472 * var(--u));width:calc(34 * var(--u));height:calc(40 * var(--u))}

  #thanks .base{left:calc(48 * var(--u));top:calc(706 * var(--u));width:calc(434 * var(--u))}
  #thanks .copy{left:calc(48 * var(--u));top:calc(744 * var(--u));font-size:max(var(--mt,0px), calc(9.8 * var(--u)));letter-spacing:0}
  #thanks .top{left:auto;right:calc(48 * var(--u));top:calc(733 * var(--u));font-size:max(var(--mt,0px), calc(11 * var(--u)));gap:calc(12 * var(--u))}
  #thanks .top i{width:calc(34 * var(--u));height:calc(34 * var(--u))}
}

/* where the music player settles once the footer is in view (js/hero.js) */
#thanks .mdock{left:calc(915 * var(--u));top:calc(612 * var(--u));width:0;height:0}
@media (max-width:860px){
  #thanks .mdock{left:calc(371 * var(--u));top:calc(758 * var(--u))}
}