/* ═══════════════════════════════════════════
   ABOUT PAGE  — matches homepage dark palette
   tokens: --bk:#060606 --wh:#f0ebe0 --red:#d01a00
═══════════════════════════════════════════ */
.abt-root {
  --bk: #060606;
  --wh: #f0ebe0;
  --red: #d01a00;
  --red2: #8a0e00;
  --red3: #ff2200;
  --d1: #111;
  --d2: #1a1a1a;
  --d3: #222;
  --d4: #2e2e2e;
  --m1: #85858e; /* WCAG AA: 4.76:1 or better on every dark surface (was #71717a, 3.9:1) */
  --m2: #a1a1aa;
  --m3: #d4d4d8;
  background: var(--bk);
  color: var(--wh);
  font-family: 'Space Mono', monospace;
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
}

.abt-root * {
  box-sizing: border-box;
}

/* ── SCROLL REVEAL ── */
.abt-rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}

.abt-vis {
  opacity: 1;
  transform: none;
}

/* ── SHARED LABELS ── */
.abt-section-tag {
  font-size: 0.75rem;
  letter-spacing: 4px;
  color: var(--red3);
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.abt-section-tag::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--d3);
}

.abt-section-head {
  padding: 3rem 3rem 2rem;
  border-bottom: 1px solid var(--d3);
}

.abt-section-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 4vw, 5.5rem);
  letter-spacing: 3px;
  line-height: .9;
  color: var(--wh);
}

.abt-outline {
  -webkit-text-stroke: 1px var(--m1);
  color: transparent;
  display: inline-block;
}

.abt-red {
  color: var(--red3);
}

/* ═══════════════════════════════════════════
   2. TICKER
═══════════════════════════════════════════ */
.abt-ticker {
  background: var(--red);
  overflow: hidden;
  padding: .5rem 0;
}

.abt-ticker-track {
  display: flex;
  animation: abt-tick 30s linear infinite;
  white-space: nowrap;
}

.abt-tick-item {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 3px;
  color: var(--wh);
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.abt-tick-item::after {
  content: '◆';
  font-size: .45rem;
  vertical-align: middle;
}

@keyframes abt-tick {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ═══════════════════════════════════════════
   3. CHIEF MENTOR
═══════════════════════════════════════════ */
.abt-chief {
  border-bottom: 1px solid var(--d3);
}

.abt-chief-tag {
  padding: 1.2rem 3rem;
  font-size: 0.75rem;
  letter-spacing: 4px;
  color: var(--red3);
  text-transform: uppercase;
  border-bottom: 1px solid var(--d3);
  display: flex;
  align-items: center;
  gap: .7rem;
}

.abt-chief-tag::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--d3);
}

.abt-chief-inner {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
}

/* left image */
.abt-chief-img-wrap {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--d3);
}

.abt-chief-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  min-height: 520px;
  filter: grayscale(.2) brightness(.8);
  transition: filter .4s, transform .6s;
}

.abt-chief-img-wrap:hover .abt-chief-img {
  filter: grayscale(0) brightness(.9);
  transform: scale(1.03);
}

.abt-chief-float {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 2rem;
  background: linear-gradient(transparent, rgba(6, 6, 6, .95));
}

.abt-chief-float-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  letter-spacing: 2px;
  color: var(--wh);
  display: block;
}

.abt-chief-float-role {
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--red3);
  text-transform: uppercase;
  display: block;
  margin-top: .2rem;
}

/* right auto-scroll panel */
.abt-chief-r {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3rem; /* Restored padding */
}

/* horizontal scrolling wrapper */
.cm-scroll-wrap-h {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 1.5rem;
}

/* fade edges horizontally */
.cm-scroll-wrap-h::before,
.cm-scroll-wrap-h::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.cm-scroll-wrap-h::before {
  left: 0;
  background: linear-gradient(to right, var(--bk), transparent);
}
.cm-scroll-wrap-h::after {
  right: 0;
  background: linear-gradient(to left, var(--bk), transparent);
}

/* the moving track — duplicated content for seamless loop */
.cm-scroll-track-h {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: cm-scroll-h 35s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}
.cm-scroll-track-h:hover {
  animation-play-state: paused;
}

@keyframes cm-scroll-h {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 0.75rem)); }
}

/* ── content cards ── */
.cm-card {
  width: 340px; /* Fixed width for cards */
  padding: 2rem;
  border: 1px solid var(--d2);
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
}

.cm-label {
  font-size: 0.75rem;
  letter-spacing: 4px;
  color: var(--red3);
  text-transform: uppercase;
  margin-bottom: .9rem;
}

.cm-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  letter-spacing: 2px;
  line-height: .9;
  color: var(--wh);
  margin-bottom: .8rem;
}

.cm-tagline {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--m2);
  font-family: 'Inter', sans-serif;
  letter-spacing: .01em;
  max-width: 62ch;
}

.cm-red { color: var(--red3); }

/* list items */
.cm-list { display: flex; flex-direction: column; gap: .55rem; }
.cm-list-item {
  font-size: .9rem;
  color: var(--m2);
  display: flex;
  align-items: baseline;
  gap: .6rem;
  line-height: 1.65;
  font-family: 'Inter', sans-serif;
  letter-spacing: .01em;
}
.cm-dot { color: var(--red3); font-size: .4rem; flex-shrink: 0; }

/* stats grid */
.cm-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem 1rem;
  margin-top: .3rem;
}
.cm-stat { display: flex; flex-direction: column; gap: .2rem; }
.cm-stat-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: var(--wh);
  line-height: 1;
}
.cm-stat-l {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: var(--m2);
  text-transform: uppercase;
  line-height: 1.4;
}

/* awards */
.cm-award {
  padding: .8rem 0;
  border-bottom: 1px solid var(--d2);
}
.cm-award:last-child { border-bottom: none; }
.cm-award-year {
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--red3);
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.cm-award-title {
  font-size: .9rem;
  color: var(--wh);
  font-weight: 500;
  line-height: 1.65;
  font-family: 'Inter', sans-serif;
  letter-spacing: .01em;
}
.cm-award-sub {
  font-size: .9rem;
  color: var(--m2);
  margin-top: .2rem;
  line-height: 1.65;
  font-family: 'Inter', sans-serif;
  letter-spacing: .01em;
}

/* domains */
.cm-domain {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--d2);
}
.cm-domain:last-child { border-bottom: none; }
.cm-domain-name {
  font-size: 0.75rem;
  color: var(--red3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cm-domain-desc {
  font-size: .9rem;
  color: var(--m2);
  line-height: 1.65;
  font-family: 'Inter', sans-serif;
  letter-spacing: .01em;
}

/* partners */
.cm-partners {
  font-size: .9rem;
  color: var(--m2);
  line-height: 1.65;
  font-family: 'Inter', sans-serif;
  letter-spacing: .01em;
}

.abt-chief-kw {
  flex-shrink: 0;
  border: 1px solid var(--d4);
  padding: .4rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--m2);
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}

.abt-chief-kw:hover {
  border-color: var(--red);
  color: var(--wh);
}

/* row of 5: first 3 in row 1, last 2 centered in row 2 */
/* ═══════════════════════════════════════════
   WHY WE EXIST · OUTREACH (shared layout)
═══════════════════════════════════════════ */
.abt-why {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  border-bottom: 1px solid var(--d3);
}

.abt-why-l {
  padding: 4rem 3rem;
  border-right: 1px solid var(--d3);
}

.abt-why-r {
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.abt-why-body {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: .01em;
  color: var(--m3);
  max-width: 62ch;
}

.abt-why-ask {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  letter-spacing: 2px;
  line-height: 1;
  color: var(--wh);
  margin: .6rem 0;
}

.abt-why-vision {
  background: var(--d1);
  border-left: 2px solid var(--red);
  padding: 1rem 1.3rem;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  line-height: 1.65;
  color: #e4e4e7;
  max-width: 62ch;
}

.abt-why-vision b {
  color: var(--red3);
  font-weight: 600;
}

.abt-outreach-sub {
  margin-top: 1.2rem;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--m2);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .abt-why {
    grid-template-columns: 1fr;
  }
  .abt-why-l {
    border-right: none;
    border-bottom: 1px solid var(--d3);
    padding: 3rem 1.5rem 2rem;
  }
  .abt-why-r {
    padding: 2rem 1.5rem 3rem;
  }
}

/* ═══════════════════════════════════════════
   PROOF — institutions + curated quotes
═══════════════════════════════════════════ */
.abt-proof {
  border-bottom: 1px solid var(--d3);
}

.abt-logo-wall {
  overflow: hidden;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--d3);
}

.abt-logo-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  will-change: transform;
  transform: translateZ(0);
}

.abt-logo {
  flex-shrink: 0;
}

.abt-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--m3);
}

.abt-logo img {
  height: 64px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  background: #fff;
  padding: 8px 12px;
}

.abt-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--d3);
}

.abt-quote {
  margin: 0;
  background: var(--bk);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.abt-quote-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #e4e4e7;
}

.abt-quote-attr {
  margin-top: auto;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--wh);
}

.abt-quote-attr span {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red3);
}

.abt-proof-more {
  padding: 1.5rem 3rem;
  border-top: 1px solid var(--d3);
}

.abt-proof-link {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red3);
}

@media (max-width: 900px) {
  .abt-quote-grid {
    grid-template-columns: 1fr;
  }
  .abt-proof-more {
    padding-inline: 1.5rem;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile-First
   xs : 320–480px
   sm : 481–768px
   md : 769–1024px
   lg : 1025–1440px
   xl : 1441px+
═══════════════════════════════════════════ */

/* ── SMALL LAPTOP (769–1024px) ── */
@media (max-width: 1024px) {
  .abt-chief-inner {
    grid-template-columns: 360px minmax(0, 1fr);
  }

  .abt-chief-r {
    padding: 3rem 2rem;
  }

}

/* ── TABLET (481–768px) ── */
@media (max-width: 900px) {
  .abt-chief-inner {
    grid-template-columns: minmax(0, 1fr); /* 1fr alone lets the max-content card strip widen the column to ~3600px */
  }

  .abt-chief-img-wrap {
    min-height: 56vw;
    border-right: none;
    border-bottom: 1px solid var(--d3);
  }

  .abt-chief-r {
    padding: 2.5rem 1.5rem;
  }

  .abt-section-head,
}

/* ── MOBILE (320–480px) ── */
@media (max-width: 560px) {
  .abt-section-head,
  .abt-chief-r,
  .abt-chief-tag {
    padding: 1rem 1rem;
  }

  .abt-chief-img-wrap {
    min-height: 70vw;
  }

}

/* ── TOUCH DEVICE: hide custom cursor ── */
@media (hover: none) and (pointer: coarse) {
  .abt-root {
    cursor: auto;
  }

  .abt-root * {
    cursor: auto;
  }

  .abt-root button,
  .abt-root a {
    cursor: pointer;
    min-height: 44px;
  }
}

/* ── SAFE AREA INSETS (notched phones) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .abt-root {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
/* Thin outlined type is hard to read on small, bright phone screens: solid fill there. */
@media (max-width: 640px) {
  .abt-outline {
    color: var(--m2);
    -webkit-text-stroke: 0;
  }
}

/* LinkedIn icon links next to Kabeer's name: had no styles, so the tap area was the 14px icon. */
.linkedin-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--d4);
  border-radius: 50%;
  color: var(--wh);
  transition: color .2s, border-color .2s;
}
.linkedin-profile-btn:hover { color: var(--red3); border-color: var(--red3); }

/* "THE MIND BEHIND DOT" had no rule at all and rendered at 14px. */
.abt-chief-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: 1px;
  color: var(--wh);
  margin-bottom: 1.25rem;
}

.abt-proof-link { display: inline-block; padding: .6rem 0; } /* taller tap target */


/* ═══════════════════════════════════════════
   FOUNDER JOURNEY (about-story.js). Default: chapters stack as plain text, canvas hidden.
   .is-live (JS): one pinned stage, scenes cross-fade on scroll, one DOT line on the canvas.
═══════════════════════════════════════════ */
.jr { position: relative; background: #050505; color: #f5f5f5; border-bottom: 1px solid var(--d3); }
.jr-canvas, .jr-shade, .jr-timeline, .jr-hint { display: none; }
.jr-scene { padding: 5rem 6vw; max-width: 46rem; }
.jr-scene + .jr-scene { border-top: 1px solid var(--d3); }

.jr-tag { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.25rem; font-size: .75rem; letter-spacing: 4px; text-transform: uppercase; color: var(--red3); }
.jr-n { color: var(--m1); }
.jr-h1, .jr-h { margin: 0 0 1.25rem; font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: 2px; line-height: .9; text-transform: uppercase; color: #f5f5f5; }
.jr-h1 { font-size: clamp(3.6rem, min(9vw, 15vh), 10rem); }
.jr-h { font-size: clamp(2.6rem, min(6vw, 9.5vh), 6.5rem); }
.jr-h1 span, .jr-h span, .jr-ask span { display: block; }
.jr-red { color: var(--red3); }
.jr-sub { margin: 0; font-family: 'Inter', sans-serif; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.5; color: var(--m3); max-width: 30ch; }
.jr-body { margin: 0 0 .5rem; font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.6; color: var(--m2); max-width: 40ch; }
.jr-ask { margin: 0 0 1.5rem; font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.8rem, min(3.6vw, 6vh), 3.6rem); letter-spacing: 1.5px; line-height: 1; color: var(--m3); }
.jr-fact { margin: 1rem 0 0; font-size: .75rem; letter-spacing: 3px; text-transform: uppercase; color: var(--m1); }
.jr-lens { margin-top: 1.5rem; padding: .8rem 1rem; max-width: 30rem; border-left: 2px solid var(--red3); background: rgba(255, 34, 0, .07); font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.5; color: #f5f5f5; }
.jr-lens b { display: block; margin-bottom: .3rem; font-family: 'Space Mono', monospace; font-weight: 400; font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--red3); }
.jr-method { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; padding: 0; list-style: none; }
.jr-method li { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; letter-spacing: 2px; color: #f5f5f5; transition: color .35s, text-shadow .35s; }
.jr-method li + li::before { content: '\2192'; margin-right: .9rem; color: var(--m1); font-family: 'Space Mono', monospace; font-size: .9rem; }

/* Community nodes */
.jr-nodes { position: relative; width: fit-content; display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.jr-nodes::before { content: ''; position: absolute; left: 2.5rem; right: 2.5rem; top: 2.5rem; height: 1px; background: rgba(255, 110, 50, .45); }
.jr-node { position: relative; width: 5rem; display: flex; flex-direction: column; align-items: center; text-align: center; outline: none; cursor: default; }
.jr-node b { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; border: 1px solid var(--d4); background: #0b0b0b; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.55rem; letter-spacing: 1px; color: #f5f5f5; transition: border-color .25s, box-shadow .25s, color .25s; }
.jr-node span { margin-top: .5rem; font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--m2); }
.jr-node small { position: absolute; top: calc(100% + .5rem); left: 50%; width: 12rem; transform: translateX(-50%); padding: .5rem .7rem; background: #111; border: 1px solid var(--d4); font-family: 'Inter', sans-serif; font-size: .78rem; line-height: 1.4; color: var(--m3); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2; }
.jr-node:hover b, .jr-node:focus-visible b { border-color: var(--red3); color: var(--red3); box-shadow: 0 0 24px rgba(255, 34, 0, .45); }
.jr-node:hover small, .jr-node:focus-visible small { opacity: 1; }
.jr-node:first-child b { border-color: rgba(255, 34, 0, .6); }

/* Final moment */
.jr-final { text-align: center; margin: 0 auto; }
.jr-final .jr-sub { margin: 0 auto 2rem; }
.jr-h--final { font-size: clamp(3.2rem, min(8vw, 13vh), 9rem); }
.jr-cta { display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: 1rem 2.4rem; background: var(--red); color: #fff; font-size: .8rem; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; }
.jr-cta:hover { background: var(--red2); transform: translateY(-2px); box-shadow: 0 0 40px rgba(255, 34, 0, .35); }
.jr-cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.jr-burst { position: fixed; left: 50%; top: 50%; z-index: 100; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--red3); transform: scale(0); pointer-events: none; }
.jr.is-bursting .jr-burst { transform: scale(140); transition: transform .65s cubic-bezier(.7, 0, .3, 1); }

/* ── Live: pinned stage ── */
.jr.is-live .jr-track { height: calc(var(--scenes) * 100svh); }
.jr.is-live .jr-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.jr.is-live .jr-canvas { display: block; position: absolute; inset: 0; }
.jr.is-live .jr-shade { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .55) 38%, transparent 62%); }
.jr.is-live .jr-scene {
  position: absolute; left: 6vw; top: 50%; padding: 0; max-width: min(44rem, 52vw); max-height: calc(100svh - 8rem);
  transform: translateY(-46%); opacity: 0; visibility: hidden; border: 0;
  transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .2, 1), visibility 0s .55s;
}
.jr.is-live .jr-scene.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .55s ease .1s, transform .7s cubic-bezier(.2, .7, .2, 1) .1s, visibility 0s; }
.jr.is-live .jr-final { left: 50%; max-width: 54rem; width: 90vw; transform: translate(-50%, -38%); }
.jr.is-live .jr-final.is-on { transform: translate(-50%, -40%); }
.jr.is-live .jr-hint { display: flex; align-items: center; gap: .7rem; margin: 3rem 0 0; font-size: .7rem; letter-spacing: 4px; text-transform: uppercase; color: var(--m2); }
.jr-hint-arrow { display: inline-block; color: var(--red3); animation: jr-bob 1.8s ease-in-out infinite; }
@keyframes jr-bob { 50% { transform: translateY(6px); } }
.jr.is-live .jr-late { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.jr.is-live .is-late .jr-late { opacity: 1; transform: none; }
.jr.is-live .jr-method li { color: var(--m1); }
.jr-ch[data-step="1"] .jr-method li:nth-child(-n+1), .jr-ch[data-step="2"] .jr-method li:nth-child(-n+2),
.jr-ch[data-step="3"] .jr-method li:nth-child(-n+3), .jr-ch[data-step="4"] .jr-method li:nth-child(-n+4),
.jr-ch[data-step="5"] .jr-method li { color: #f5f5f5 !important; text-shadow: 0 0 18px rgba(255, 34, 0, .55); }

/* Timeline: a vertical line of chapter dots on the right; the line fills as the story advances (--fill). */
.jr.is-live .jr-timeline { display: block; position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); z-index: 3; }
.jr-timeline ol { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.jr-timeline ol::before, .jr-timeline ol::after { content: ''; position: absolute; right: 22px; top: 22px; bottom: 22px; width: 1px; background: var(--d4); }
.jr-timeline ol::after { bottom: auto; height: calc(var(--fill, 0) * (100% - 44px)); background: var(--red3); box-shadow: 0 0 8px rgba(255, 34, 0, .6); }
.jr-timeline button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--m1); font: inherit; font-size: .65rem; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; }
.jr-tl-dot { width: 11px; height: 11px; border-radius: 50%; background: #050505; border: 1px solid var(--m1); transition: background .3s, border-color .3s, box-shadow .3s, transform .3s; }
.jr-tl-label { position: absolute; right: 100%; top: 50%; margin-top: -.5em; line-height: 1; opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; white-space: nowrap; }
.jr-timeline button:hover .jr-tl-label, .jr-timeline button:focus-visible .jr-tl-label, .jr-timeline [aria-current] .jr-tl-label { opacity: 1; transform: none; }
.jr-timeline button:focus-visible { outline: 2px solid var(--red3); outline-offset: 2px; }
.jr-timeline .is-past .jr-tl-dot { background: var(--red3); border-color: var(--red3); }
.jr-timeline [aria-current] { color: #f5f5f5; }
.jr-timeline [aria-current] .jr-tl-dot { background: var(--red3); border-color: var(--red3); transform: scale(1.35); box-shadow: 0 0 0 6px rgba(255, 34, 0, .18), 0 0 18px rgba(255, 34, 0, .7); }

@media (max-width: 800px) {
  .jr-scene { padding: 3.5rem 1.25rem; }
  .jr.is-live .jr-track { height: calc(var(--scenes) * 95svh); }
  .jr.is-live .jr-shade { background: linear-gradient(0deg, rgba(5, 5, 5, .97) 0%, rgba(5, 5, 5, .85) 45%, transparent 66%); }
  .jr.is-live .jr-scene { left: 1.25rem; right: 3.25rem; top: auto; bottom: 2rem; max-width: none; max-height: 62svh; transform: translateY(16px); }
  .jr.is-live .jr-scene.is-on { transform: none; }
  .jr.is-live .jr-final, .jr.is-live .jr-final.is-on { left: 1.25rem; right: 1.25rem; width: auto; bottom: auto; top: 34%; transform: none; }
  .jr.is-live .jr-open { bottom: 3rem; }
  .jr.is-live .jr-timeline { right: .25rem; }
  .jr-timeline ol { gap: .35rem; }
  .jr-tl-label { display: none; }
  .jr-h { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .jr-h1 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .jr-ask { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .jr-body { font-size: .92rem; }
  .jr-fact { display: none; }
  .jr-nodes { gap: .4rem; }
  .jr-node { width: 4.5rem; }
  .jr-node b { width: 4rem; }
  .jr-node span { font-size: .55rem; letter-spacing: 1px; }
  .jr-node b { height: 4rem; font-size: 1.25rem; }
  .jr-nodes::before { top: 2rem; left: 2rem; right: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-hint-arrow { animation: none; }
  .jr.is-live .jr-scene, .jr.is-live .jr-scene.is-on { transition: opacity .2s; }
}