/* ==========================================================================
   JASWANT SINGH JAS — One Thread: styles
   Upload to: wp-content/themes/bricks-child/assets/css/thread.css
   Enqueued by functions.php (see functions-snippet.php).
   ========================================================================== */

/* The metadata face. Core Framework asks for IBM Plex Mono but no file was
   installed, so every mono label fell back to Courier. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url(../fonts/IBMPlexMono-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --jsj-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M0 9 L9 0 L18 9 L9 18 Z' fill='none' stroke='%23611f29' stroke-width='0.7'/%3E%3C/svg%3E");
  --jsj-lattice-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M0 13 L13 0 L26 13 L13 26 Z' fill='none' stroke='%23f7ecda' stroke-width='0.7'/%3E%3C/svg%3E");
}

/* ==========================================================================
   THE CINEMATIC HERO
   The thread is born at a point inside the photograph, descends, and passes
   through a gap in the hairline at the foot of the hero — cream over the
   image, maroon on paper, one stroke. Ported from dad/hero/index.html, with
   the mockup's private variables mapped onto the site's tokens.
   ========================================================================== */
/* padding: 0 defeats the section padding the connector forces on every push */
.jsj-hero { position: relative; min-height: 560px; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 !important; }
.jsj-media { position: absolute; inset: 0; z-index: 0; }
.jsj-media img, .jsj-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* One full-bleed gradient stack: local weight under the type, mood, and the
   dissolve into paper. Every layer spans the hero and reaches transparent,
   so there is no box and no edge anywhere. */
.jsj-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(86% 66% at 22% 74%, rgba(14,7,9,.52) 0%, rgba(14,7,9,.34) 42%, rgba(14,7,9,.10) 66%, rgba(14,7,9,0) 82%),
    linear-gradient(180deg, rgba(20,10,12,.56) 0%, rgba(20,10,12,.16) 20%, rgba(24,10,14,.26) 40%, rgba(30,12,16,.60) 62%, rgba(46,14,20,.74) 78%, rgba(242,234,217,0) 90%, var(--bg-body) 100%),
    linear-gradient(90deg, rgba(16,8,10,.60) 0%, rgba(16,8,10,.30) 30%, rgba(16,8,10,.04) 56%, rgba(16,8,10,0) 70%);
}
.jsj-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Bricks' native YouTube/video background does not "cover" on its own: it
   anchors rather than centring, so a portrait phone shows the wrong slice.
   Overfill the hero at 16:9 and centre it, so the crop is equal on both sides. */
.jsj-hero .bricks-background-video-wrapper { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.jsj-hero .bricks-background-video-wrapper iframe,
.jsj-hero .bricks-background-video-wrapper video {
  position: absolute; top: 50%; left: 50%;
  width: max(100%, calc(100svh * 16 / 9)); height: max(100%, calc(100vw * 9 / 16));
  min-width: 0; min-height: 0; max-width: none;
  transform: translate(-50%, -50%); object-fit: cover; pointer-events: none;
}

/* the threshold — "the door": a hairline with a gap the thread passes through */
.jsj-threshold { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); }
.jsj-threshold::after { content: ""; position: absolute; left: var(--jsj-door-x, 50%); top: -1px; width: 74px; height: 3px; background: var(--bg-body); transform: translateX(-50%); }

/* the type over the photograph */
.jsj-hero > .brxe-container { position: relative; z-index: 4; align-items: flex-start; text-align: left; max-width: min(62ch, 58vw); margin-left: 0; padding: 0 clamp(22px, 4.4vw, 56px) clamp(90px, 16vh, 190px); }
.jsj-hero .brxe-heading, .jsj-hero .brxe-text-basic, .jsj-hero .brxe-text-link { color: var(--cream); text-align: left; }
.jsj-hero h1 { font-size: clamp(40px, 7.6vw, 124px); letter-spacing: -.012em; text-wrap: balance; max-width: 14ch; line-height: 1.02; }
/* Gold stays a hairline, as the brief says: a rule under the eyebrow, never type over a photograph. */
.jsj-hero .jsj-hero-eyebrow::after { content: ""; display: block; width: 54px; height: 1px; background: var(--accent); margin-top: 10px; opacity: .85; }
.jsj-hero .jsj-hero-lede { font-family: var(--font-display); font-style: italic; opacity: .92; max-width: 30ch; line-height: 1.42; }
.jsj-hero .jsj-hero-cue::before { content: ""; display: inline-block; width: 20px; height: 1px; background: var(--cream); vertical-align: middle; margin-right: 10px; opacity: .55; }
.jsj-hero .jsj-hero-credit { opacity: .62; }

/* the origin knot, inside the photograph */
.jsj-origin { position: absolute; z-index: 4; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--cream); background: rgba(247,236,218,.18); transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(18,8,10,.28); pointer-events: none; }
.jsj-origin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(247,236,218,.4); animation: jsjpulse 3.4s ease-out infinite; }
@keyframes jsjpulse { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* the dark under-stroke, clipped to the hero, so the thread survives a bright patch */
.jsj-shadowpath { fill: none; stroke: rgba(18,8,10,.55); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* Phone: a different photograph, not a smaller one. The type moves to the
   middle band; the bottom third belongs to the dissolve and the door. */
@media (max-width: 760px) {
  .jsj-hero { justify-content: flex-start; }
  .jsj-hero > .brxe-container { max-width: none; margin-top: auto; padding-bottom: clamp(170px, 26vh, 260px); }
  .jsj-hero h1 { font-size: clamp(38px, 11vw, 58px); max-width: 9ch; }
  .jsj-scrim {
    background:
      radial-gradient(104% 54% at 34% 60%, rgba(14,7,9,.56) 0%, rgba(14,7,9,.38) 44%, rgba(14,7,9,.12) 68%, rgba(14,7,9,0) 84%),
      linear-gradient(180deg, rgba(20,10,12,.50) 0%, rgba(20,10,12,.26) 16%, rgba(22,10,13,.56) 40%, rgba(28,12,16,.72) 58%, rgba(44,14,20,.68) 74%, rgba(242,234,217,0) 90%, var(--bg-body) 100%),
      linear-gradient(90deg, rgba(16,8,10,.46) 0%, rgba(16,8,10,.18) 42%, rgba(16,8,10,0) 72%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .jsj-origin::after { animation: none; }
}

/* ---------- the thread ---------- */
#brx-content { position: relative; }
.jsj-thread { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 3; }
.jsj-main { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.jsj-fanline { fill: none; stroke: var(--primary); stroke-width: 1.4; stroke-linecap: round; opacity: .85; }
.jsj-fandot { fill: var(--primary); opacity: 0; transition: opacity .6s; }
.jsj-stshadow { fill: none; stroke: var(--cream); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 16 12; }
.jsj-stitch { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 16 12; }

/* ---------- knots and year tags ---------- */
.jsj-knot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-body); border: 3px solid var(--primary); z-index: 4; transform: translate(-50%, -50%); transition: background .5s, box-shadow .5s; }
.jsj-knot.on { background: var(--primary); box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 14%, transparent); }
.jsj-knot.on::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); animation: jsjring 1.6s ease-out 1; }
@keyframes jsjring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.jsj-ktag { position: absolute; z-index: 4; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--primary); opacity: 0; transform: translateY(-50%); transition: opacity .6s .2s; white-space: nowrap; }
.jsj-ktag.on { opacity: 1; }

/* ---------- hero weave (Punjab · Wales interlace) ---------- */
.jsj-weave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.jsj-weave line { stroke: var(--primary); stroke-width: .7; opacity: .2; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.2s ease; }
.jsj-weave line.in { stroke-dashoffset: 0; }
[data-thread-start] > .brxe-container { position: relative; z-index: 2; }

/* ---------- photographs sit in a lattice frame ---------- */
[data-node] figure img { padding: 12px; background-image: var(--jsj-lattice); background-size: 18px 18px; }

/* ---------- legacy fan labels ---------- */
[data-fanspace] > * { max-width: 14ch; text-align: center; }
[data-fanspace] > * { opacity: 0; transform: translateY(8px); transition: opacity .8s, transform .8s; }
[data-fanspace].show > * { opacity: 1; transform: none; }
[data-fanspace].show > *:nth-child(2) { transition-delay: .15s; }
[data-fanspace].show > *:nth-child(3) { transition-delay: .3s; }
[data-fanspace].show > *:nth-child(4) { transition-delay: .45s; }
[data-fanspace].show > *:nth-child(5) { transition-delay: .6s; }

/* ---------- chapter rail (desktop) ---------- */
.jsj-rail { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 45; width: 210px; height: 340px; transition: opacity .4s; }
.jsj-rail svg { position: absolute; right: 7px; top: 0; width: 16px; height: 100%; overflow: visible; }
.jsj-track { stroke: var(--line); stroke-width: 2; fill: none; }
.jsj-fill { stroke: var(--primary); stroke-width: 2; fill: none; stroke-linecap: round; }
.jsj-rail button { position: absolute; right: 0; transform: translate(0, -50%); display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 6px 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); opacity: .7; transition: .3s; }
.jsj-rail button .lab { white-space: nowrap; text-align: right; min-width: 100px; background: color-mix(in srgb, var(--bg-body) 82%, transparent); padding: 3px 7px; }
.jsj-rail button .d { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-body); border: 2px solid var(--line); flex: 0 0 auto; transition: .3s; }
.jsj-rail button:hover { opacity: 1; color: var(--text); }
.jsj-rail button.on { opacity: 1; color: var(--primary); }
.jsj-rail button.on .d { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
body.jsj-rail-hide .jsj-rail { opacity: 0; pointer-events: none; }

/* ---------- chapter rail (phone) ---------- */
.jsj-mrail { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: 58px; background: color-mix(in srgb, var(--bg-body) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.jsj-mrail .cur { position: absolute; left: 0; right: 0; top: 7px; text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--primary); }
.jsj-mrail svg { position: absolute; left: 6%; width: 88%; bottom: 17px; height: 6px; overflow: visible; }
.jsj-mrail button { position: absolute; bottom: 4px; width: 32px; height: 32px; transform: translateX(-50%); background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; }
.jsj-mrail button .d { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-body); border: 2px solid var(--line); transition: .3s; }
.jsj-mrail button.on .d { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.jsj-mrail button.done .d { border-color: var(--primary); }
@media (max-width: 1000px) {
  .jsj-rail { display: none; }
  .jsj-mrail { display: block; }
  body.jsj-has-mrail { padding-bottom: 58px; }
}

/* ---------- reveal ---------- */
.jsj-rv { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
.jsj-rv.in { opacity: 1; transform: none; }

/* ---------- menu: the weave is the index ---------- */
.jsj-menu-btn { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--line); padding: 11px 16px; border-radius: 40px; cursor: pointer; font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text); transition: .25s; }
.jsj-menu-btn:hover { border-color: var(--primary); color: var(--primary); }
.jsj-menu-btn .bars { display: inline-block; width: 16px; height: 9px; position: relative; }
.jsj-menu-btn .bars::before, .jsj-menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; }
.jsj-menu-btn .bars::before { top: 0; }
.jsj-menu-btn .bars::after { bottom: 0; }
.jsj-menu { position: fixed; inset: 0; z-index: 90; background: var(--bg-body); display: none; overflow: auto; }
.jsj-menu.open { display: block; }
.jsj-menu::before { content: ""; position: absolute; inset: 0; background-image: var(--jsj-lattice); background-size: 18px 18px; opacity: .16; -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, transparent 35%, #000 95%); mask-image: radial-gradient(70% 60% at 50% 45%, transparent 35%, #000 95%); pointer-events: none; }
.jsj-menu .inner { position: relative; min-height: 100%; display: flex; flex-direction: column; padding: 0 24px 40px; font-family: var(--font-serif); }
.jsj-menu .top { display: flex; align-items: center; justify-content: space-between; min-height: 74px; max-width: 1180px; width: 100%; margin: 0 auto; padding: 12px 20px; gap: 16px; }
.jsj-menu .brand { text-decoration: none; font-family: var(--font-display); font-size: var(--text-l); color: var(--text); line-height: 1.1; }
.jsj-menu .brand small { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .3em; color: var(--secondary); margin-top: 4px; }
.jsj-menu .close { background: none; border: 1px solid var(--primary); color: var(--primary); padding: 11px 16px; border-radius: 40px; cursor: pointer; font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }
.jsj-menu .close:hover { background: var(--primary); color: var(--cream); }
.jsj-menu .body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(32px, 6vh, 72px) 0; }
.jsj-menu .eyebrow { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .28em; text-transform: uppercase; color: var(--primary); }
.jsj-menu h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); margin: 0 0 clamp(30px, 5vh, 48px); color: var(--text); }
.jsj-weavegrid { display: flex; flex-direction: column; align-items: center; }
.jsj-weavegrid .row { display: flex; justify-content: center; gap: 0 6px; }
.jsj-weavegrid .row + .row { margin-top: -66px; }
.jsj-cell { width: 138px; height: 138px; display: grid; place-items: center; text-decoration: none; position: relative; margin: 4px 0; }
.jsj-cell::before { content: ""; position: absolute; inset: 18px; transform: rotate(45deg); border: 1px solid var(--primary); background: var(--bg-body); transition: .3s; }
.jsj-cell:hover::before, .jsj-cell:focus-visible::before, .jsj-cell[aria-current]::before { background: var(--primary); inset: 12px; }
.jsj-cell span { position: relative; z-index: 1; font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--primary); transition: .3s; line-height: 1.25; text-align: center; max-width: 96px; padding: 0 2px; }
.jsj-cell:hover span, .jsj-cell:focus-visible span, .jsj-cell[aria-current] span { color: var(--cream); }
.jsj-menu .foot { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.jsj-menu .foot a { text-decoration: none; margin: 0 10px; }
body.jsj-menu-open { overflow: hidden; }
/* Phones: the weave stops being a grid and becomes a list. Four 138px
   diamonds cannot fit a 375px screen, and shrinking them gives 9px labels.
   The diamond survives as the marker, so the motif is kept. */
@media (max-width: 760px) {
  .jsj-menu .inner { padding: 0 20px 32px; }
  .jsj-menu .top { min-height: 64px; padding: 10px 0; }
  .jsj-menu .body { padding: 18px 0; justify-content: flex-start; }
  .jsj-menu h2 { font-size: var(--text-xl); margin-bottom: clamp(18px, 3vh, 28px); }
  .jsj-weavegrid { display: block; width: 100%; max-width: 420px; }
  .jsj-weavegrid .row { display: block; }
  .jsj-weavegrid .row + .row { margin-top: 0; }
  .jsj-weavegrid .row + .row::before { content: ""; display: block; height: 1px; background: var(--line); margin: 12px 0; }
  .jsj-cell { width: 100%; height: auto; min-height: 56px; display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: 0; padding: 14px 4px; }
  .jsj-cell::before { position: static; inset: auto; width: 11px; height: 11px; flex: 0 0 auto; transform: rotate(45deg); background: var(--bg-body); border: 1px solid var(--primary); }
  .jsj-cell:hover::before, .jsj-cell:focus-visible::before, .jsj-cell[aria-current]::before { inset: auto; background: var(--primary); }
  .jsj-cell span { max-width: none; text-align: left; font-size: var(--text-s); letter-spacing: .12em; color: var(--text); }
  .jsj-cell:hover span, .jsj-cell:focus-visible span, .jsj-cell[aria-current] span { color: var(--primary); }
  .jsj-menu .foot { padding-top: 22px; }
  .jsj-menu .foot a { display: inline-block; padding: 10px; margin: 0 4px; }
}

/* ==========================================================================
   HEADER AND FOOTER
   Styled by class, never by #brxe-id: Bricks renumbers element IDs every
   time a template is pasted, which silently kills ID-based rules.
   ========================================================================== */

/* ---------- header ---------- */
.jsj-hdr { position: sticky; top: 0; z-index: 50; font-family: var(--font-serif); background: color-mix(in srgb, var(--bg-body) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.jsj-hdr .brxe-container { min-height: 74px; }
.jsj-brand { font-family: var(--font-display); text-decoration: none; white-space: nowrap; display: inline-block; padding: 6px 0; }
.jsj-brand-sub { font-family: var(--font-mono); }
.jsj-nav { font-family: var(--font-sans); }
.jsj-nav a { font-family: var(--font-sans); text-decoration: none; position: relative; padding-bottom: 4px; opacity: .85; }
.jsj-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--primary); transition: width .3s; }
.jsj-nav a:hover::after, .jsj-nav a[aria-current]::after { width: 100%; }
.jsj-nav a:hover { opacity: 1; }
.jsj-search { font-family: var(--font-sans); text-decoration: none; opacity: .85; }
.jsj-search:hover { opacity: 1; }

/* Phones: the inline nav and search give way to the Menu button. */
@media (max-width: 1000px) {
  .jsj-nav, .jsj-search { display: none !important; }
  .jsj-hdr .brxe-container { min-height: 64px; }
  .jsj-menu-btn { min-height: 44px; padding: 12px 18px; }
}

/* ---------- footer ---------- */
.jsj-footer { font-family: var(--font-serif); font-size: var(--text-m); }
.jsj-footer .brxe-text-link { font-family: var(--font-sans); text-decoration: none; display: block; line-height: 2.1; }
.jsj-footer .brxe-text-link:hover { color: var(--cream); }
.jsj-footer-tag { max-width: 34ch; }
.jsj-col-head { font-family: var(--font-mono); }
.jsj-mono { font-family: var(--font-mono); }
.jsj-seal { display: block; margin-left: auto; margin-right: auto; }
.jsj-seal img { display: block; width: 100%; height: auto; margin: 0 auto; transition: opacity .3s; }
.jsj-seal:hover img { opacity: .85; }

/* Phones: footer links need a real tap target, and the seal shrinks. */
@media (max-width: 760px) {
  .jsj-footer .brxe-text-link { line-height: 1.5; padding: 13px 0; }
  .jsj-seal { width: 170px; }
}

/* ---------- footer ornament (replaces the code element) ---------- */
.jsj-orn { width: 120px; height: 20px; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M2,10 C20,10 26,3 40,3 C54,3 58,17 74,17 C90,17 96,10 118,10' fill='none' stroke='%23e6c880' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.jsj-footer-band { height: 22px; background-image: var(--jsj-lattice-cream); background-size: 22px 22px; opacity: .28; }

/* ---------- phones: page content ---------- */
@media (max-width: 760px) {
  /* five fan labels will not sit across a phone; let them wrap in pairs.
     !important overrides the flex basis set on the element itself. */
  [data-fanspace] { flex-wrap: wrap !important; justify-content: center !important; column-gap: var(--space-m) !important; row-gap: var(--space-s) !important; }
  [data-fanspace] > * { flex: 0 0 auto !important; max-width: 42% !important; }
  /* linked headings (archive cards) need a real tap target */
  [data-node] h3 a { display: inline-block; padding: 8px 0; }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .jsj-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .jsj-knot, .jsj-ktag, .jsj-fandot, .jsj-weave line, [data-fanspace] > * { transition: none !important; }
  .jsj-knot.on::after { animation: none; }
}