/* ==========================================================================
   footer.css — the footer (js/footer.js), on both pages.
   Figma "Index" (SHOTS | 2026, 15561:10832), 1440 x 900. The type and the
   labels stay at their px sizes; the atom scales with the window.
   ========================================================================== */
.ft{ position:absolute; inset:0; pointer-events:none; color:var(--c-ink); font-family:var(--font-main); font-weight:900; text-transform:uppercase; visibility:hidden; }
.ft *{ box-sizing:border-box; }
.ft p, .ft h2, .ft ul{ margin:0; padding:0; }
.ft a{ color:inherit; text-decoration:none; pointer-events:auto; }

/* the head: the title, the heart sprayed over it, the round mark, the tagline */
.ft-head{ position:absolute; left:10px; top:10px; width:373px; height:215px; transform:scale(var(--ft-k, 1)); transform-origin:0 0; z-index:3; }
.ft-title{ font-size:64px; line-height:.85; letter-spacing:-.02em; text-align:justify; width:373px; font-weight:900; text-box:trim-both cap alphabetic; }
.ft-pie{ position:absolute; left:145px; top:107px; width:52px; height:52px; fill:var(--c-ink); }
.ft-heart{ position:absolute; left:52px; top:-10px; width:114px; height:92px; overflow:visible; }
.ft-heart path{ fill:none; stroke:var(--c-accent); stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 1; stroke-dashoffset:1; }
.ft-heart__s{ stroke-width:12; }
.ft-heart__d{ stroke-width:2.4; }
.ft-heart__run path{ stroke:var(--c-accent); stroke-dasharray:none; stroke-dashoffset:0; }
.ft-heart__run circle{ fill:var(--c-accent); }
.ft-heart{ z-index:4; }   /* the runs go over the title */
.ft-tag{ position:absolute; left:0; top:191px; display:flex; flex-direction:column; gap:2px; font-size:12px; line-height:.85; letter-spacing:-.02em; }

/* the menu, top right */
.ft-nav{ position:absolute; right:10px; top:10px; width:373px; list-style:none; display:flex; flex-direction:column; gap:5px; font-size:12px; line-height:.95; letter-spacing:-.02em; z-index:3; }
.ft-nav li{ display:flex; justify-content:space-between; }
.ft-nav a{ position:relative; transition:opacity .25s; }
.ft-nav a:hover, .ft-nav a:focus-visible{ opacity:.6; }   /* as the header's links (and their scramble), nothing more */

/* the atom: dotted lines, red squares on the crossings, brackets */
.ft-atom{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
.ft-orb circle, .ft-orb path{ fill:none; stroke:var(--c-ink); stroke-opacity:.16; stroke-width:1; stroke-dasharray:1.2 1.8; }
/* the rings in 3D: the near half brighter, the far half fainter */
.ft-orb:not(.ft-orb--back) path{ stroke-opacity:.5; }
.ft-orb--back path{ stroke-opacity:.15; }
.ft-sq rect{ fill:#000; stroke:var(--c-accent); stroke-width:1; }
.ft-brk path{ fill:none; stroke:var(--c-ink); stroke-width:1; }
/* the atom's electrons */
.ft-el circle{ fill:var(--c-ink); }


/* the bottom */
.ft-corner{ position:absolute; bottom:30px; width:17px; height:17px; fill:none; stroke:var(--c-ink); stroke-width:1; }
.ft-corner--l{ left:10px; } .ft-corner--r{ right:10px; transform:scaleX(-1); }
.ft-by, .ft-year{ position:absolute; bottom:10px; font-size:12px; line-height:.95; letter-spacing:-.02em; }
.ft-by{ left:10px; } .ft-year{ right:10px; }

@media (max-width:720px){
  .ft-nav{ display:none; }   /* the phone has its own menu */
}