/* DJTJ press kit: TJ brand layer on top of the shared site.css */
:root {
  --void: #0d0c0a;
  --bone: #f4f1ea;
  --ash: rgba(244, 241, 234, 0.8);
  --hair: rgba(244, 241, 234, 0.14);
  --hot: #c9a54c;
  --hot2: #e3c77a;
  --lav: #b9a8e0;
  --vio: #9772f3;
  --ink: #b9a8e0;
  --f-disp: Audiowide, "Russo One", Alexandria, system-ui, sans-serif;
  --f-kick: Righteous, "Russo One", Alexandria, system-ui, sans-serif;
  --f-body: Righteous, Montserrat, "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-band: Orbitron, "Russo One", Alexandria, system-ui, sans-serif;
  --f-mono: "Roboto Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
  color-scheme: dark;
}
body {
  background: var(--void);
  font-family: var(--f-body);
  font-size: 16px;
  font-synthesis: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.6);
}
body::before {
  content: "";
  position: fixed;
  inset: -3%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 72% 38%, rgba(151, 114, 243, 0.1), transparent 70%),
    radial-gradient(45% 40% at 16% 84%, rgba(201, 165, 76, 0.07), transparent 70%),
    url(tj/bg-stage.webp) center / cover no-repeat;
  transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -6px), 0);
}
::selection {
  background: var(--hot);
  color: var(--void);
}

/* ---------- type ---------- */
.wide {
  font-family: var(--f-disp);
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: 0.01em;
  line-height: 0.98;
  text-shadow: 0.035em 0.045em 0 rgba(0, 0, 0, 0.55), 0 2px 24px rgba(0, 0, 0, 0.6);
}
html[lang="ar"] .wide:not([dir="ltr"]) {
  font-weight: 700;
}
.tag {
  font-family: var(--f-kick);
  font-weight: 400;
  letter-spacing: 0.14em;
}
.micro {
  font-family: var(--f-mono);
  letter-spacing: 0.2em;
}
.langbtn {
  font-family: var(--f-kick);
  font-weight: 400;
  letter-spacing: 0.12em;
}
.tj-gold {
  color: var(--hot);
}
.tj-em {
  font-family: var(--f-disp);
  letter-spacing: 0.01em;
}
.tj-lead {
  max-width: 46ch;
  font-size: var(--t3);
  line-height: 1.36;
  color: var(--bone);
}
.tj-body {
  max-width: 60ch;
  font-size: var(--t2);
  line-height: 1.48;
  color: var(--ash);
}
.tj-k {
  margin-bottom: clamp(5px, 1vh, 10px);
  color: var(--hot) !important;
}
html[lang="ru"] {
  --f-body: Montserrat, "IBM Plex Sans Arabic", system-ui, sans-serif;
}
html[lang="ru"] .tj-body,
html[lang="ru"] .tj-lead {
  font-weight: 500;
}

/* ---------- chapter header ---------- */
.tj-ch {
  position: relative;
  margin-bottom: clamp(8px, 1.8vh, 22px);
}
.tj-ch-k {
  display: flex;
  align-items: baseline;
  gap: calc(18 * var(--u));
  line-height: 1;
}
/* fixed-width number box: every chapter's kicker and title start on the same x */
.tj-ch-n {
  flex: none;
  inline-size: calc(56 * var(--u));
  font-family: var(--f-disp);
  font-size: calc(20 * var(--u));
  letter-spacing: 0.04em;
  color: var(--bone);
}
.tj-ch-kick {
  font-family: var(--f-kick);
  font-size: calc(36 * var(--u));
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--hot);
}
.tj-ch-t {
  margin-top: calc(2 * var(--u));
  padding-inline-start: calc(74 * var(--u));
  font-size: calc(54 * var(--u));
  line-height: 1.04;
  text-wrap: balance;
}
/* rule runs to the frame edge; the Track label sits flush right */
.tj-ch-rule {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  height: 18px;
  margin-top: calc(6 * var(--u));
}
.tj-ch-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}
.tj-ch-line {
  position: absolute;
  inset-inline: 0;
  top: 8px;
  height: 2px;
  background: linear-gradient(90deg, rgba(201, 165, 76, 0) 0%, rgba(201, 165, 76, 0.75) 18%, var(--hot) 100%);
  transform-origin: left center;
}
html[dir="rtl"] .tj-ch-line {
  background: linear-gradient(270deg, rgba(201, 165, 76, 0) 0%, rgba(201, 165, 76, 0.75) 18%, var(--hot) 100%);
  transform-origin: right center;
}
.tj-ch-tip {
  position: absolute;
  inset-inline-end: -3px;
  top: 4px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-inline-start: 9px solid var(--hot);
}
.tj-ch-page {
  flex: none;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--f-disp);
  font-size: calc(16 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
}
.tj-ch-page b {
  font-weight: 400;
  color: var(--hot);
}

/* ---------- tagline band ---------- */
.tj-band {
  position: relative;
  margin-top: auto;
  padding-top: clamp(8px, 1.6vh, 18px);
  margin-inline-start: calc(-1 * var(--gut));
  width: 100vw;
}
.tj-band-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  padding: 0.55em var(--gut);
  background: linear-gradient(90deg, rgba(244, 241, 234, 0) 0%, rgba(244, 241, 234, 0.09) 16%, rgba(244, 241, 234, 0.09) 84%, rgba(244, 241, 234, 0) 100%);
  font-family: var(--f-band);
  font-weight: 500;
  font-variant: small-caps;
  font-synthesis: small-caps;
  font-size: calc(19 * var(--u));
  line-height: 1.3;
  letter-spacing: 0.13em;
  text-align: center;
  color: var(--lav);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
html[lang="ar"] .tj-band-in {
  font-variant: normal;
  letter-spacing: 0;
  font-weight: 600;
}
.tj-band-txt {
  display: inline-block;
}
.tj-scr {
  position: relative;
  color: transparent;
  text-shadow: none;
}
.tj-scr > i {
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  color: var(--hot2);
  text-shadow: 0 0 8px rgba(201, 165, 76, 0.6);
}
.tj-mk {
  position: relative;
  color: var(--hot);
  white-space: nowrap;
}
.tj-mk-dec {
  position: absolute;
  pointer-events: none;
}
.tj-mk-ul .tj-mk-dec {
  inset-inline: 0;
  bottom: -0.22em;
  height: 1.5px;
  background: var(--hot);
  transform-origin: left center;
}
html[dir="rtl"] .tj-mk-ul .tj-mk-dec {
  transform-origin: right center;
}
.tj-mk-pill {
  padding: 0 0.4em;
}
.tj-mk-pill .tj-mk-dec {
  inset: -0.2em -0.1em;
  border: 1.5px solid var(--hot);
  border-radius: 999px;
}
.tj-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.8em;
  flex: none;
}
.tj-eq > i {
  display: block;
  width: 3px;
  height: 100%;
  background: var(--vio);
  transform-origin: bottom;
  animation: tjEq 1.2s ease-in-out infinite alternate;
}
.tj-eq > i:nth-child(2) {
  animation-delay: -0.5s;
  animation-duration: 0.9s;
}
.tj-eq > i:nth-child(3) {
  animation-delay: -0.2s;
  animation-duration: 1.4s;
}
.tj-eq.is-on > i {
  animation-duration: 0.42s;
}
@keyframes tjEq {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}

/* ---------- brush + label ---------- */
.tj-brush {
  display: inline-block;
  position: relative;
  max-width: 100%;
  padding: 0.42em 1.4em 0.36em;
  background: url(tj/brush.webp) center / 100% 100% no-repeat;
  font-family: var(--f-kick);
  font-size: calc(19 * var(--u));
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #141210;
  text-shadow: none;
}
html[lang="ru"] .tj-brush {
  font-weight: 600;
}
.tj-label {
  background: #f2efe8;
  border-radius: calc(12 * var(--u));
  padding: 0.55em 0.95em 0.5em;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  font-size: calc(15 * var(--u));
  line-height: 1.22;
  text-align: center;
  max-width: 30ch;
}

/* ---------- side marquee ---------- */
.tj-side {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: calc(16 * var(--u));
  width: calc(30 * var(--u));
  z-index: 22;
  pointer-events: none;
}
.tj-side-rule {
  position: absolute;
  top: 8vh;
  bottom: 13vh;
  inset-inline-end: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(201, 165, 76, 0), var(--hot) 12%, var(--hot) 88%, rgba(201, 165, 76, 0));
  opacity: 0.85;
}
.tj-side-win {
  position: absolute;
  top: 8vh;
  bottom: 13vh;
  inset-inline-start: 0;
  width: calc(18 * var(--u));
  overflow: hidden;
  transform: rotate(180deg);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}
.tj-side-track {
  position: absolute;
  top: 0;
  left: 0;
  writing-mode: vertical-rl;
  inline-size: max-content;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: calc(12.5 * var(--u));
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  animation: tjSide 30s linear infinite, tjIn 0.9s ease both;
}
.tj-side-run > span {
  margin-block-end: 0;
  margin-inline-end: 0.85em;
}
.tj-side-g {
  color: var(--hot);
}
.tj-side-sep {
  color: rgba(244, 241, 234, 0.55);
}
@keyframes tjSide {
  to {
    transform: translate3d(0, -50%, 0);
  }
}
@keyframes tjIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tjSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- player bar ---------- */
.tj-player {
  pointer-events: auto;
}
.tj-pl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.tj-pl-now {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.tj-vin {
  width: clamp(18px, 2.5vh, 24px);
  height: auto;
  flex: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.tj-pl-title {
  font-family: var(--f-kick);
  font-size: var(--t1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hot);
  white-space: nowrap;
}
.tj-pl-ctl {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.9vw, 14px);
}
.tj-pl-b {
  display: grid;
  place-items: center;
  width: clamp(26px, 3.4vh, 32px);
  height: clamp(26px, 3.4vh, 32px);
  border-radius: 999px;
  color: rgba(244, 241, 234, 0.82);
  transition: color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}
.tj-pl-b:hover,
.tj-pl-b:focus-visible {
  color: var(--bone);
  transform: scale(1.08);
}
.tj-pl-b:focus-visible {
  outline: 1px solid var(--hot);
  outline-offset: 2px;
}
.tj-pl-b.is-on {
  color: var(--hot);
}
.tj-pl-main {
  width: clamp(34px, 4.6vh, 42px);
  height: clamp(34px, 4.6vh, 42px);
  border: 1.5px solid var(--hot);
  color: var(--hot);
  background: rgba(13, 12, 10, 0.55);
  box-shadow: 0 0 18px rgba(201, 165, 76, 0.25);
}
.tj-pl-main:hover,
.tj-pl-main:focus-visible {
  background: var(--hot);
  color: var(--void);
}
.tj-ico {
  width: 58%;
  height: 58%;
  display: block;
}
.tj-pl-main .tj-ico {
  width: 46%;
  height: 46%;
}
.tj-pl-count {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.7em;
  font-family: var(--f-disp);
  font-size: var(--t1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
}
.tj-pl-num {
  color: var(--hot);
  font-variant-numeric: tabular-nums;
}
.tj-pl-scrub {
  position: relative;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background: rgba(244, 241, 234, 0.16);
}
.tj-pl-fill {
  position: absolute;
  top: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lav), var(--hot));
}
html[dir="rtl"] .tj-pl-fill {
  background: linear-gradient(270deg, var(--lav), var(--hot));
}
.head {
  width: 11px;
  height: 11px;
  background: var(--bone);
  box-shadow: 0 0 0 2px var(--hot), 0 0 12px 2px rgba(201, 165, 76, 0.55);
}

/* ---------- loader ---------- */
.tj-load-cd {
  width: clamp(120px, 21vh, 210px);
  height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 30px rgba(201, 165, 76, 0.18));
}

/* ---------- hero ---------- */
.tj-hero-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  align-items: center;
  gap: 2vw;
  min-height: 0;
}
.tj-hero-l {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.tj-hero-r {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tj-hero-logo {
  width: auto;
  height: clamp(54px, 9vh, 104px);
  margin-bottom: clamp(10px, 2.2vh, 26px);
  filter: drop-shadow(0 0 18px rgba(201, 165, 76, 0.28)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.tj-h1 {
  font-size: calc(116 * var(--u));
  line-height: 0.96;
  white-space: nowrap;
  margin-inline-start: -0.04em;
}
html[dir="rtl"] .tj-h1 {
  text-align: right;
}
.tj-hero-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(22 * var(--u));
  margin-top: clamp(16px, 3.4vh, 40px);
}
.tj-bc {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 3px;
}
.tj-bc img {
  display: block;
  height: calc(54 * var(--u));
  width: auto;
}
.tj-bc-scan {
  position: absolute;
  top: 0;
  bottom: 28%;
  left: 6%;
  width: 2px;
  background: var(--hot);
  box-shadow: 0 0 8px 2px rgba(201, 165, 76, 0.75);
  animation: tjScan 3.4s ease-in-out infinite;
}
@keyframes tjScan {
  0%,
  100% {
    left: 6%;
  }
  50% {
    left: 90%;
  }
}
.tj-dj {
  display: block;
  height: calc(54 * var(--u));
  width: auto;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}
.tj-pa {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2px;
  background: #050505;
  border: 1.5px solid #f4f1ea;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.tj-pa-t,
.tj-pa-b {
  padding: 3px 4px 2px;
  font-family: Anton, var(--f-kick);
  font-size: calc(8.5 * var(--u));
  letter-spacing: 0.32em;
  text-align: center;
  text-transform: uppercase;
  color: #f4f1ea;
}
.tj-pa-m {
  padding: 3px 7px 2px;
  background: #f4f1ea;
  font-family: Anton, var(--f-kick);
  font-size: calc(25 * var(--u));
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  color: #050505;
}
.tj-disc {
  position: relative;
  width: min(66svh, 38vw);
  aspect-ratio: 1;
  flex: none;
}
.tj-disc-vinyl {
  position: absolute;
  inset: 12%;
  z-index: 0;
}
.tj-disc-vinyl img {
  display: block;
  width: 100%;
  height: 100%;
  animation: tjSpin 4.8s linear infinite;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.7));
}
.tj-disc-cover {
  position: absolute;
  inset: 10%;
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--hot), 0 0 0 9px rgba(13, 12, 10, 0.55), 0 0 0 10px rgba(201, 165, 76, 0.35), 0 0 70px rgba(201, 165, 76, 0.22), 0 30px 70px rgba(0, 0, 0, 0.65);
}
.tj-disc-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: tjKB 16s ease-in-out infinite alternate;
}
@keyframes tjKB {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.09) translate3d(-1.5%, -1%, 0);
  }
}
.tj-disc-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: tjSpin 46s linear infinite reverse;
}
.tj-disc-ring text {
  font-family: var(--f-mono);
  font-size: 6.6px;
  letter-spacing: 0.32em;
  fill: var(--hot);
}

/* ---------- act 1: dream ---------- */
.tj-a1 {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(18px, 3.4vh, 40px) 4vw;
}
.tj-strap {
  margin-bottom: clamp(14px, 2.8vh, 30px);
  font-size: calc(34 * var(--u));
  line-height: 1.04;
}
.tj-a1 .tj-body {
  margin-top: clamp(10px, 2vh, 22px);
}
.tj-a1-r {
  --S: min(37svh, 25vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tj-a1-r > .tj-label {
  position: relative;
  z-index: 3;
  max-width: 38ch;
}
.tj-a1-r > .tj-label:first-child {
  margin-bottom: calc(14 * var(--u));
}
.tj-a1-r > .tj-label:last-child {
  margin-top: calc(14 * var(--u));
}
.tj-orbit {
  --R: calc(var(--S) * 0.4);
  position: relative;
  width: var(--S);
  height: var(--S);
  flex: none;
}
.tj-orbit-ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px dashed rgba(201, 165, 76, 0.5);
}
.tj-orbit-ring::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 1px solid rgba(185, 168, 224, 0.18);
}
.tj-orbit-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  animation: tjSpin 28s linear infinite;
}
.tj-orbit-slot {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.tj-orbit-plate {
  position: absolute;
  width: calc(var(--S) * 0.25);
  height: calc(var(--S) * 0.25);
  left: calc(var(--S) * -0.125);
  top: calc(var(--S) * -0.125);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: url(tj/plate.webp) center / cover no-repeat;
  box-shadow: 0 0 0 2px #15130f, 0 0 0 3px rgba(201, 165, 76, 0.65), 0 10px 20px rgba(0, 0, 0, 0.55);
  animation: tjSpin 28s linear infinite reverse;
}
.tj-orbit-plate img {
  display: block;
  height: auto;
  max-height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.tj-orbit-core {
  position: absolute;
  inset: 26%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--f-kick);
  font-size: calc(16 * var(--u));
  line-height: 1.28;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bone);
}

/* ---------- act 2: rewind ---------- */
.tj-a2 {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
  gap: clamp(16px, 3vh, 32px) 4vw;
  align-items: start;
  max-width: 76vw;
}
.tj-a2-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 3vh, 34px) 3vw;
}
.tj-a2-d {
  margin-top: clamp(8px, 1.4vh, 14px);
  max-width: 44ch;
}
.tj-a2-c {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.6vh, 28px);
}
.tj-ctr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45em;
}
.tj-ctr-n {
  font-size: var(--t6);
  line-height: 1;
  color: var(--bone);
}
.tj-ctr-l {
  font-family: var(--f-mono);
  font-size: var(--t1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
}
.tj-pill {
  position: relative;
  display: inline-block;
  padding: 0.14em 0.5em 0.06em;
}
.tj-pill-o {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--hot);
  border-radius: 999px;
  box-shadow: inset 0 0 18px rgba(201, 165, 76, 0.18), 0 0 14px rgba(201, 165, 76, 0.18);
}
.tj-stk img {
  filter: drop-shadow(2px 0 0 #f4f1ea) drop-shadow(-2px 0 0 #f4f1ea) drop-shadow(0 2px 0 #f4f1ea) drop-shadow(0 -2px 0 #f4f1ea) drop-shadow(0 22px 34px rgba(0, 0, 0, 0.6)) !important;
}
.tj-stk-m {
  filter: drop-shadow(2px 0 0 #f4f1ea) drop-shadow(-2px 0 0 #f4f1ea) drop-shadow(0 2px 0 #f4f1ea) drop-shadow(0 -2px 0 #f4f1ea) !important;
}

/* ---------- act 3: network ---------- */
.tj-a3-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 2.4vw;
  margin-bottom: clamp(10px, 2.2vh, 26px);
}
.tj-a3-top .tj-body {
  max-width: 64ch;
}
.tj-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(16 * var(--u)) calc(24 * var(--u));
}
.tj-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc((100% - 7 * 24 * var(--u)) / 8);
  height: calc(56 * var(--u));
}
.tj-logo img {
  display: block;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(201, 165, 76, 0.42));
}
.tj-a3-lists {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(8px, 1.5vh, 14px) calc(28 * var(--u));
  margin-top: clamp(18px, 3.4vh, 40px);
}
.tj-a3-lists .tj-k {
  margin-bottom: 0;
}
.tj-names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.35em;
  font-family: var(--f-disp);
  font-size: calc(15 * var(--u));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
}
.tj-names > li + li::before {
  content: "\00B7";
  margin-inline: 0.7em;
  color: var(--hot);
}
html[dir="rtl"] .tj-names {
  justify-content: flex-end;
}

/* ---------- act 4: rotation ---------- */
.tj-a4 {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(18px, 3.4vh, 40px) 4vw;
}
.tj-a4 .tj-lead {
  margin-top: clamp(12px, 2.4vh, 26px);
}
.tj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.6em;
  margin-top: clamp(12px, 2.4vh, 26px);
}
.tj-chips > li {
  padding: 0.38em 0.85em 0.32em;
  border: 1px solid rgba(201, 165, 76, 0.55);
  border-radius: 999px;
  background: rgba(13, 12, 10, 0.45);
  font-family: var(--f-kick);
  font-size: var(--t1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
}
.tj-vgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(12 * var(--u)) calc(20 * var(--u));
}
.tj-vcell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc((100% - 100 * var(--u)) / 6);
  height: calc(50 * var(--u));
}
.tj-vcell img {
  display: block;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

/* ---------- act 5: impact ---------- */
.tj-a5 {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 2rem 4.5vw;
}
.tj-ipw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: calc(34 * var(--u)) calc(24 * var(--u));
}
.tj-ip {
  position: relative;
}
.tj-ip-pta {
  width: 80%;
}
.tj-ip-let {
  width: 76%;
}
.tj-ip-rework {
  width: 74%;
}
.tj-ip-mf {
  width: 86%;
}
.tj-ipm {
  display: none;
}
.tj-a5-lead {
  margin-bottom: clamp(18px, 3.4vh, 38px);
}
.tj-a5-intro {
  margin-bottom: clamp(16px, 3vh, 34px);
}
.tj-a5-fmts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.4vh, 28px) 3vw;
}
.tj-a5-f0 {
  grid-column: span 2 / span 2;
}
.tj-a5-fn {
  display: block;
  font-size: var(--t4);
  line-height: 1.05;
  text-transform: none;
}
.tj-a5-fd {
  margin-top: 0.45em;
  max-width: 50ch;
  color: var(--bone);
}
.tj-arrow {
  position: absolute;
  inset-inline-start: 0;
  bottom: -0.36em;
  width: 100%;
  height: 10px;
  pointer-events: none;
}
.tj-arrow-l {
  position: absolute;
  inset-inline: 0 6px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, rgba(201, 165, 76, 0.3), var(--hot));
  transform-origin: left center;
}
html[dir="rtl"] .tj-arrow-l {
  background: linear-gradient(270deg, rgba(201, 165, 76, 0.3), var(--hot));
  transform-origin: right center;
}
.tj-arrow-t {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-inline-start: 9px solid var(--hot);
  transform: translateY(-50%);
}

/* ---------- act 6: certified ---------- */
.tj-a6 {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: 2rem 4vw;
}
.tj-a6 .tj-body {
  margin-top: 0;
}
.tj-a6-roles {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: clamp(10px, 2vh, 24px);
}
.tj-a6-roles > li,
.tj-arrows > li {
  position: relative;
  padding-inline-start: 1.6em;
  font-size: var(--t2);
  line-height: 1.38;
  color: var(--bone);
}
.tj-a6-roles > li::before,
.tj-arrows > li::before {
  content: "\2192";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--hot);
}
html[dir="rtl"] .tj-a6-roles > li::before,
html[dir="rtl"] .tj-arrows > li::before {
  content: "\2190";
}
.tj-cert {
  position: relative;
  height: 58svh;
}
.tj-cert1 {
  position: absolute;
  inset-inline-start: 4%;
  top: 2%;
  width: 66%;
}
.tj-to {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
}
.tj-to img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.6));
}
.tj-to1 {
  inset-inline-end: 2.5%;
  top: 18%;
}
.tj-to2 {
  inset-inline-end: 14%;
  bottom: 0;
}

/* ---------- act 7: live ---------- */
.tj-a7 {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(16px, 3vh, 30px) 3.4vw;
  max-width: 62vw;
}
.tj-a7 .tj-lead {
  margin-top: clamp(12px, 2.2vh, 24px);
}
.tj-a7 .tj-body {
  margin-top: clamp(8px, 1.6vh, 16px);
}
.tj-quote {
  padding-inline-start: clamp(10px, 1vw, 16px);
  border-inline-start: 2px solid var(--vio);
  font-size: var(--t2);
  line-height: 1.42;
  color: var(--lav);
}
.tj-stages {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 18px);
}
.tj-stage-n {
  font-size: var(--t4);
  line-height: 1;
}
html[dir="rtl"] .tj-stage-n {
  text-align: right;
}
.tj-stage-d {
  margin-top: 0.35em;
}
.tj-a7 .tj-k {
  margin-top: clamp(14px, 2.6vh, 28px);
}
.tj-a7 .tj-chips {
  margin-top: 0;
}

/* ---------- act 8: pursuit ---------- */
.tj-tlw {
  max-width: 63vw;
}
.tj-tl {
  --tlg: clamp(5px, 1vh, 13px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tlg);
}
.tj-tl-card {
  position: relative;
  padding: clamp(5px, 0.8vh, 12px) clamp(14px, 1.3vw, 20px);
  border: 1px solid rgba(244, 241, 234, 0.2);
  border-radius: calc(14 * var(--u));
  background: rgba(13, 12, 10, 0.52);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  margin-inline-start: calc(20 * var(--u));
}
.tj-tl-card::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-20 * var(--u));
  top: calc(-0.5 * var(--tlg));
  bottom: calc(-0.5 * var(--tlg));
  width: 1px;
  background: rgba(151, 114, 243, 0.4);
}
.tj-tl-dot {
  position: absolute;
  inset-inline-start: calc(-20 * var(--u) - 4.5px);
  top: calc(clamp(5px, 0.8vh, 12px) + 0.45em);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vio);
  box-shadow: 0 0 0 3px rgba(151, 114, 243, 0.25), 0 0 12px rgba(151, 114, 243, 0.8);
}
.tj-tl-h {
  font-family: var(--f-kick);
  font-size: min(calc(16 * var(--u)), 1.78vh);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hot);
}
.tj-tl-d {
  margin-top: 0.25em;
  max-width: none;
  font-size: min(calc(15 * var(--u)), 1.67vh);
  line-height: 1.4;
  color: var(--bone);
}
.tj-tl-note {
  display: flex;
  align-items: center;
}

/* ---------- act 9: bookings ---------- */
.tj-a9 {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 2rem 3vw;
}
.tj-a9-l {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.4vh, 26px);
  min-width: 0;
}
.tj-ct {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.2vh, 24px) 2.4vw;
}
.tj-ct-wide {
  grid-column: span 2 / span 2;
}
.tj-ct-v {
  display: block;
  font-family: var(--f-kick);
  font-size: var(--t3);
  line-height: 1.15;
  color: var(--lav);
  overflow-wrap: anywhere;
}
html[dir="rtl"] .tj-ct-v {
  text-align: right;
}
.tj-handle {
  text-transform: none;
  letter-spacing: 0.02em;
}
.tj-soc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 2.2vw;
}
.tj-epk {
  border-color: var(--hot) !important;
}
.tj-a9-r {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3vh, 34px);
}
.tj-a9-logo {
  width: auto;
  height: clamp(110px, 22vh, 230px);
  filter: drop-shadow(0 0 26px rgba(201, 165, 76, 0.3)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}
.tj-hands {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 40vw);
  direction: ltr;
}
.tj-hands img {
  display: block;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
}
.tj-hand-l {
  width: 52%;
  margin-inline-end: -3%;
  position: relative;
  z-index: 1;
}
.tj-hand-r {
  width: 46%;
  margin-top: 1.5%;
}
.tj-hands-spark {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  background: radial-gradient(circle, rgba(185, 168, 224, 0.95) 0%, rgba(151, 114, 243, 0.45) 30%, rgba(151, 114, 243, 0) 70%);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.tj-hands.is-on .tj-hands-spark {
  animation: tjSpark 2.6s ease-out infinite;
}
@keyframes tjSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  18% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25);
  }
}

/* ---------- mobile / stacked ---------- */
html,
body {
  overflow-x: clip;
}
@media (max-width: 1023px) {
  .tj-ch-t {
    padding-inline-start: 0;
    font-size: clamp(30px, 9vw, 48px);
  }
  .tj-ch-kick {
    font-size: clamp(22px, 6.4vw, 32px);
  }
  .tj-ch-n {
    font-size: 15px;
  }
  .tj-ch-page {
    font-size: 12px;
  }
  .tj-ch-n {
    inline-size: auto;
  }
  .tj-band {
    width: calc(100% + var(--gut) + var(--gut-r));
    padding-top: 28px;
  }
  .tj-band-in {
    font-size: 15px;
    padding: 0.7em var(--gut);
  }
  .tj-brush {
    font-size: 15px;
  }
  .tj-label {
    font-size: 13px;
  }
  .tj-hero-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .tj-h1 {
    font-size: clamp(40px, 12.6vw, 96px);
    white-space: normal;
  }
  .tj-hero-badges {
    gap: 14px;
  }
  .tj-bc img,
  .tj-dj {
    height: 44px;
  }
  .tj-pa-m {
    font-size: 21px;
  }
  .tj-pa-t,
  .tj-pa-b {
    font-size: 7.5px;
  }
  .tj-hero-r {
    overflow: hidden;
    padding: 4px 0;
  }
  .tj-disc {
    width: min(72vw, 420px);
    margin-inline-end: 8vw;
  }
  .tj-a1,
  .tj-a4,
  .tj-a5,
  .tj-a6,
  .tj-a7,
  .tj-a9 {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
  .tj-a2 {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
  .tj-a2-items,
  .tj-tl,
  .tj-ct {
    grid-template-columns: minmax(0, 1fr);
  }
  .tj-ct-wide {
    grid-column: auto;
  }
  .tj-a2-c {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px 26px;
  }
  .tj-a1-r {
    --S: min(76vw, 360px);
  }
  .tj-orbit-core {
    font-size: 13px;
  }
  .tj-logos {
    gap: 14px 22px;
  }
  .tj-logo {
    flex-basis: calc((100% - 66px) / 4);
  }
  .tj-a3-lists {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }
  .tj-a3-lists .tj-names {
    margin-bottom: 10px;
  }
  .tj-names {
    flex-direction: column;
    font-size: 13px;
  }
  .tj-names > li + li::before {
    content: none;
  }
  html[dir="rtl"] .tj-names {
    align-items: flex-end;
  }
  .tj-vgrid {
    gap: 14px 16px;
  }
  .tj-vcell {
    flex-basis: calc((100% - 48px) / 4);
    height: 40px;
  }
  .tj-ipw {
    display: none;
  }
  .tj-ipm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 20px 24px;
  }
  .tj-a5-fmts {
    grid-template-columns: minmax(0, 1fr);
  }
  .tj-a5-f0 {
    grid-column: auto;
  }
  .tj-cert {
    height: auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 14px;
    align-items: center;
  }
  .tj-cert1,
  .tj-to {
    position: static;
    width: auto;
  }
  .tj-cert-tos {
    display: grid;
    gap: 12px;
  }
  .tj-tlw {
    max-width: none;
  }
  .tj-tl-h {
    font-size: 15px;
  }
  .tj-hands {
    width: 100%;
  }
  .tj-a9-logo {
    height: 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tj-disc-vinyl img,
  .tj-disc-ring,
  .tj-disc-img,
  .tj-orbit-spin,
  .tj-orbit-plate,
  .tj-side-track,
  .tj-bc-scan,
  .tj-eq.is-on > i,
  .tj-hands.is-on .tj-hands-spark {
    animation: none !important;
  }
}

.tj-act {
  padding-bottom: calc(clamp(16px, 3vh, 34px) + clamp(34px, 4.6vh, 42px) + 17px) !important;
}
@media (max-height: 780px) and (min-width: 1024px) {
  .tj-act {
    padding-top: clamp(30px, 5.6vh, 60px) !important;
  }
  .tj-ch {
    margin-bottom: 6px;
  }
  .tj-ch-t {
    font-size: calc(50 * var(--u));
  }
  .tj-ch-kick {
    font-size: calc(32 * var(--u));
  }
  .tj-band {
    padding-top: 6px;
  }
  .tj-band-in {
    padding-top: 0.45em;
    padding-bottom: 0.45em;
    font-size: calc(17 * var(--u));
  }
  .tj-logo {
    height: calc(50 * var(--u));
  }
  /* short laptop screens: one smaller timeline size for every language */
  .tj-tl-d {
    font-size: calc(14 * var(--u));
    line-height: 1.36;
  }
  .tj-tl {
    --tlg: 6px;
  }
}

/* ---------- motion layer ---------- */
body::before {
  animation: tjDrift 34s ease-in-out infinite alternate;
}
@keyframes tjDrift {
  from {
    background-position: 0 0, 0 0, 50% 38%;
  }
  to {
    background-position: 0 0, 0 0, 50% 64%;
  }
}
.tj-wg {
  transform-box: fill-box;
  transform-origin: center;
  animation: tjWave 1.25s ease-in-out infinite alternate;
}
.tj-wg1 {
  animation-duration: 0.92s;
  animation-delay: -0.4s;
}
.tj-wg2 {
  animation-duration: 1.6s;
  animation-delay: -0.9s;
}
.tj-wg3 {
  animation-duration: 1.05s;
  animation-delay: -0.2s;
}
@keyframes tjWave {
  from {
    transform: scaleY(0.42);
  }
  to {
    transform: scaleY(1.22);
  }
}
.tj-ch-track::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: calc(90 * var(--u));
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(227, 199, 122, 0), #fff3c4, rgba(227, 199, 122, 0));
  opacity: 0;
  pointer-events: none;
}
.tj-ch-rule.is-on .tj-ch-track::after {
  animation: tjRun 3.6s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
html[dir="rtl"] .tj-ch-track::after {
  left: auto;
  right: 0;
}
html[dir="rtl"] .tj-ch-rule.is-on .tj-ch-track::after {
  animation-name: tjRunR;
}
@keyframes tjRun {
  0% {
    left: 0;
    opacity: 0;
  }
  12%,
  82% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 90 * var(--u));
    opacity: 0;
  }
}
@keyframes tjRunR {
  0% {
    right: 0;
    opacity: 0;
  }
  12%,
  82% {
    opacity: 1;
  }
  100% {
    right: calc(100% - 90 * var(--u));
    opacity: 0;
  }
}
.tj-ch-rule.is-on .tj-ch-tip {
  animation: tjTip 3.6s ease-in-out infinite;
}
@keyframes tjTip {
  0%,
  86%,
  100% {
    filter: none;
  }
  94% {
    filter: drop-shadow(0 0 6px #fff3c4) brightness(1.5);
  }
}
.tj-mk.is-lit {
  background: linear-gradient(100deg, var(--hot) 0%, var(--hot) 38%, #fff1bf 50%, var(--hot) 62%, var(--hot) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tjShine 3.4s linear infinite;
}
@keyframes tjShine {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -130% 0;
  }
}
.tj-logo img {
  animation: tjChase 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.16s);
}
@keyframes tjChase {
  0%,
  62%,
  100% {
    filter: drop-shadow(0 0 7px rgba(201, 165, 76, 0.42));
  }
  70% {
    filter: drop-shadow(0 0 16px rgba(227, 199, 122, 0.95)) brightness(1.3);
  }
}
.tj-vcell img {
  animation: tjChaseV 6.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.11s);
}
@keyframes tjChaseV {
  0%,
  60%,
  100% {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  }
  68% {
    filter: drop-shadow(0 0 12px rgba(227, 199, 122, 0.75)) brightness(1.25);
  }
}
.tj-bob {
  display: block;
  animation: tjBob 5.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
@keyframes tjBob {
  from {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 6px, 0);
  }
}
.tj-wob {
  animation-name: tjWob;
  animation-duration: 6.5s;
}
@keyframes tjWob {
  from {
    transform: translate3d(0, -4px, 0) rotate(-3deg);
  }
  to {
    transform: translate3d(0, 5px, 0) rotate(3deg);
  }
}
.tj-a1-r > .tj-label {
  animation: tjBob 4.4s ease-in-out infinite alternate;
}
.tj-a1-r > .tj-label:last-child {
  animation-delay: -2.2s;
}
.tj-hero-badges > * {
  animation: tjBob 4.8s ease-in-out infinite alternate;
}
.tj-hero-badges > :nth-child(2) {
  animation-delay: -1.6s;
}
.tj-hero-badges > :nth-child(3) {
  animation-delay: -3.2s;
}
.tj-hero-logo,
.tj-a9-logo {
  animation: tjGlow 3.4s ease-in-out infinite alternate;
}
@keyframes tjGlow {
  from {
    filter: drop-shadow(0 0 10px rgba(201, 165, 76, 0.18)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  }
  to {
    filter: drop-shadow(0 0 28px rgba(227, 199, 122, 0.55)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  }
}
.tj-pill-o {
  animation: tjBreathe 2.8s ease-in-out infinite alternate;
}
@keyframes tjBreathe {
  from {
    box-shadow: inset 0 0 10px rgba(201, 165, 76, 0.12), 0 0 6px rgba(201, 165, 76, 0.12);
  }
  to {
    box-shadow: inset 0 0 22px rgba(201, 165, 76, 0.3), 0 0 22px rgba(201, 165, 76, 0.35);
  }
}
.tj-chips > li {
  animation: tjChip 5s ease-in-out infinite;
}
.tj-chips > li:nth-child(2) {
  animation-delay: 0.35s;
}
.tj-chips > li:nth-child(3) {
  animation-delay: 0.7s;
}
.tj-chips > li:nth-child(4) {
  animation-delay: 1.05s;
}
.tj-chips > li:nth-child(5) {
  animation-delay: 1.4s;
}
.tj-chips > li:nth-child(6) {
  animation-delay: 1.75s;
}
@keyframes tjChip {
  0%,
  66%,
  100% {
    border-color: rgba(201, 165, 76, 0.55);
    box-shadow: none;
    color: var(--bone);
  }
  76% {
    border-color: var(--hot2);
    box-shadow: 0 0 16px rgba(201, 165, 76, 0.55);
    color: #fff6d6;
  }
}
.tj-tl {
  position: relative;
}
.tj-tl::after {
  content: "";
  position: absolute;
  inset-inline-start: -3px;
  top: 0;
  width: 7px;
  height: 64px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(151, 114, 243, 0), rgba(205, 192, 240, 0.95), rgba(151, 114, 243, 0));
  pointer-events: none;
  animation: tjTravel 4.2s ease-in-out infinite;
}
@keyframes tjTravel {
  0% {
    top: 0;
    opacity: 0;
  }
  10%,
  90% {
    opacity: 1;
  }
  100% {
    top: calc(100% - 64px);
    opacity: 0;
  }
}
.tj-tl-dot {
  animation: tjDot 4.2s ease-in-out infinite;
}
.tj-tl > li:nth-child(2) .tj-tl-dot {
  animation-delay: 0.8s;
}
.tj-tl > li:nth-child(3) .tj-tl-dot {
  animation-delay: 1.6s;
}
.tj-tl > li:nth-child(4) .tj-tl-dot {
  animation-delay: 2.4s;
}
.tj-tl > li:nth-child(5) .tj-tl-dot {
  animation-delay: 3.2s;
}
@keyframes tjDot {
  0%,
  30%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(151, 114, 243, 0.25), 0 0 12px rgba(151, 114, 243, 0.8);
  }
  12% {
    transform: scale(1.5);
    box-shadow: 0 0 0 6px rgba(151, 114, 243, 0.3), 0 0 22px rgba(205, 192, 240, 1);
  }
}
.tj-hands.is-on .tj-hand-l {
  animation: tjHandL 2.6s ease-in-out infinite;
}
.tj-hands.is-on .tj-hand-r {
  animation: tjHandR 2.6s ease-in-out infinite;
}
@keyframes tjHandL {
  0%,
  100% {
    transform: translate3d(-2%, 0, 0);
  }
  50% {
    transform: translate3d(1.5%, 0, 0);
  }
}
@keyframes tjHandR {
  0%,
  100% {
    transform: translate3d(2%, 0, 0);
  }
  50% {
    transform: translate3d(-1.5%, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before,
  .tj-wg,
  .tj-ch-rule.is-on .tj-ch-track::after,
  .tj-ch-rule.is-on .tj-ch-tip,
  .tj-mk.is-lit,
  .tj-eq > i,
  .tj-logo img,
  .tj-vcell img,
  .tj-bob,
  .tj-a1-r > .tj-label,
  .tj-hero-badges > *,
  .tj-hero-logo,
  .tj-a9-logo,
  .tj-pill-o,
  .tj-chips > li,
  .tj-tl::after,
  .tj-tl-dot,
  .tj-hands.is-on img {
    animation: none !important;
  }
}
.scrollcue {
  bottom: calc(clamp(70px, 11vh, 112px) + 62px) !important;
}
/* utilities not present in the compiled site.css */
.h-\[46svh\] { height: 46svh; }
.h-\[48svh\] { height: 48svh; }
.h-\[50svh\] { height: 50svh; }
.h-\[52svh\] { height: 52svh; }
.h-\[54svh\] { height: 54svh; }
.h-\[56svh\] { height: 56svh; }
.h-\[58svh\] { height: 58svh; }
.h-\[60svh\] { height: 60svh; }
.max-w-\[340px\] { max-width: 340px; }
.max-w-\[400px\] { max-width: 400px; }
.max-w-\[440px\] { max-width: 440px; }
.w-\[70\%\] { width: 70%; }

/* ---------- polish layer: one frame, one type system ---------- */
:root {
  --tr-tag: 0.14em;
  --tr-micro: 0.22em;
}
html:not([lang="ar"]) body {
  font-variant-ligatures: no-common-ligatures;
}
.tag,
.tj-chips > li,
.langbtn {
  letter-spacing: var(--tr-tag);
}
.micro,
.tj-ctr-l,
.tj-pl-title {
  letter-spacing: var(--tr-micro);
}
.scrollcue .tag,
.tj-epk .tag {
  letter-spacing: var(--tr-micro) !important;
}
.tj-body,
.tj-lead,
.tj-quote,
.tj-tl-d,
.tj-a5-fd,
.tj-a6-roles > li {
  text-wrap: pretty;
}
.tj-label,
.tj-brush,
.tj-orbit-core,
.tj-strap,
.tj-band-in {
  text-wrap: balance;
}
/* scroll cue centred without a half-pixel translate */
.scrollcue {
  left: 0 !important;
  right: 0 !important;
  margin-inline: auto;
  width: max-content;
  transform: none !important;
}
@media (min-width: 1024px) {
  /* content, header rule, top bar and player share one frame: gut to gut */
  .tj-act > div {
    max-width: calc(100vw - 2 * var(--gut)) !important;
  }
  div:has(> nav > .langbtn) {
    right: var(--gut) !important;
  }
  .tj-player {
    left: var(--gut) !important;
    right: var(--gut) !important;
  }
}

@media (min-width: 1024px) {
  /* hero disc sits flush with the frame instead of bleeding past it */
  .tj-hero-r {
    justify-content: flex-end;
    /* the vinyl slides ~10% of the disc past the cover: keep its edge on the frame */
    padding-inline-end: calc(min(66svh, 38vw) * 0.11);
  }
}
html[dir="rtl"] .tj-ch-n {
  text-align: right;
}