/* footer · the sign-off: the big lockup, where the pixel goes home, breathes and is popped off.
   Every rule is scoped to [data-part="footer"]. */
[data-part="footer"] { padding-block: clamp(110px, 13vw, 200px) 36px; }
[data-part="footer"] .ft-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px 48px; }
[data-part="footer"] .ft-lk { font-size: clamp(56px, 11.2vw, 196px); gap: .2em; margin-inline-end: .1em; }
[data-part="footer"] .ft-lk .sym { width: 1.05em; height: 1.05em; }
[data-part="footer"] .ft-lk .wm b, [data-part="footer"] .ft-lk .wm .off { display: inline-block; }
[data-part="footer"] .ft-sym .px, [data-part="footer"] .ft-sym .ft-tiles { transform-box: fill-box; }
[data-part="footer"] .ft-tag { display: grid; gap: 6px; margin-bottom: .4em; }
/* both lines of the tagline line up on the page's outer edge, whichever way each one reads */
html[dir="rtl"] [data-part="footer"] .ft-tag { text-align: left; }
html[dir="ltr"] [data-part="footer"] .ft-tag { text-align: right; }
[data-part="footer"] .ft-tag [lang="ar"] { font: 600 clamp(24px, 2.3vw, 34px)/1.4 var(--f-ar); }
[data-part="footer"] .ft-tag [lang="en"] { font: 600 18px/1.35 var(--f-en); letter-spacing: -.01em; color: var(--ink-2); }
[data-part="footer"] .ft-meta { list-style: none; margin: clamp(72px, 9vw, 136px) 0 0; padding: 24px 0 0; border-top: 1px solid var(--wire); display: flex; flex-wrap: wrap; gap: 10px 32px; color: var(--ink-2); }
[data-part="footer"] .ft-meta a { color: var(--sand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgba(234, 220, 195, .35); transition: text-decoration-color .2s; }
[data-part="footer"] .ft-meta a:hover { text-decoration-color: currentColor; }
[data-part="footer"] .ft-meta li:last-child { margin-inline-start: auto; }

/* the moment (script only): the slot waits empty until the pixel comes home (it travels down the page from part to part) */
[data-part="footer"].ft-nopx .ft-sym .px { opacity: 0; }
[data-part="footer"] .ft-cv { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% + 100vh); pointer-events: none; z-index: 5; display: none; }
[data-part="footer"].ft-playing .ft-cv { display: block; }
[data-part="footer"].ft-playing .ft-sym { visibility: hidden; }
[data-part="footer"] .ft-poke { position: absolute; left: 0; top: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22%; background: transparent; cursor: pointer; z-index: 6; display: none; overflow: hidden; }
[data-part="footer"] .ft-poke > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-part="footer"].ft-rest .ft-poke { display: block; }

@media (max-width: 899px) {
  [data-part="footer"] .ft-top { flex-direction: column; align-items: flex-start; }
  /* the stacked lockup, as on the Reels: the mark above the name */
  [data-part="footer"] .ft-lk { flex-direction: column; align-items: flex-start; gap: .14em; font-size: clamp(54px, 15.5vw, 120px); }
  [data-part="footer"] .ft-lk .sym { width: 2.7em; height: 2.7em; margin-inline-start: -.33em; }
  html[dir="rtl"] [data-part="footer"] .ft-tag { text-align: right; }
  html[dir="ltr"] [data-part="footer"] .ft-tag { text-align: left; }
  [data-part="footer"] .ft-meta li:last-child { margin-inline-start: 0; flex-basis: 100%; }
}