/* ==========================================================================
   USAIndiaCFO — v27 · Client stories, variant "journey" (/indiacfo/)
   Stories drawn as you scroll.

   Each story is a short pinned chapter: a sticky clay slab (dark for the
   first story, ivory for the second, alternating sides) holds a drawing that
   assembles itself as the reader scrolls; beside it, the story and its
   figures rise in as their moment arrives.

   Additive to clay.css: same palette, same single light (top-left, casts
   +x +y), the site's drawn-diagram vocabulary — faint scaffolding, one bronze
   line that draws itself (pathLength="1" + stroke-dashoffset), concentric
   nodes, Newsreader labels over Inter letter-spaced caps, a pulse dot.

   States
     (no class)  the markup's own state: every drawing complete, nothing
                 pinned. This is what no-JS and prefers-reduced-motion get.
     .sj--live   JS owns the drawings (data-on toggles, inline dashoffsets,
                 transforms, opacities).
     .sj--pin    ≥941px: each story's track is 100svh + 160svh tall and its
                 stage sticks for the travel. Below that the stories stack
                 and each drawing plays once when it enters view.
   ========================================================================== */

/* ── section head ───────────────────────────────────────────────────────── */
.sj { padding-bottom: clamp(48px, 6vw, 96px); }
.sj__head { margin-bottom: clamp(36px, 5vw, 72px); }
.sj__head h2 { margin-top: 22px; max-width: 18ch; }

/* ── one story: slab + copy ─────────────────────────────────────────────── */
.sj__story { position: relative; }
.sj:not(.sj--pin) .sj__story + .sj__story { margin-top: clamp(72px, 9vw, 140px); }

.sj__grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5.6vw, 104px);
}
.sj__story--b .sj__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sj__story--b .sj__slab { order: 2; }

/* The slab keeps the drawing's 640:600 aspect and never outgrows the space
   under the stuck header, so the whole drawing is always on screen. */
.sj__slab {
  margin: 0; justify-self: center;
  width: min(100%, calc((100svh - 82px - 72px) * 640 / 600));
  aspect-ratio: 640 / 600;
  border-radius: var(--r-xl);
}
.sj__slab .sj-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* ── copy column ────────────────────────────────────────────────────────── */
.sj__copy { width: 100%; max-width: 470px; }
.sj__story--a .sj__copy { justify-self: start; }
.sj__story--b .sj__copy { justify-self: end; }
.sj__kick {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 16px; margin-bottom: 26px; border-bottom: 1px solid var(--line);
  font: 500 12px/1 Inter, sans-serif; letter-spacing: .22em; font-variant-numeric: tabular-nums;
}
.sj__no { color: var(--bronze-deep); }
.sj__of { color: var(--ink-faint); }
.sj__title {
  font-size: clamp(1.75rem, 2.45vw, 2.5rem); line-height: 1.12; font-weight: 300;
  letter-spacing: -.02em; text-wrap: balance;
}
.sj__text { margin-top: 20px; font: 400 15.5px/1.76 Inter, sans-serif; color: var(--ink-muted); text-wrap: pretty; }
.sj__metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line);
}
.sj__metrics:empty { display: none; }
.sj__val {
  display: block; white-space: nowrap;
  font: 250 clamp(2.75rem, 4.1vw, 4.25rem)/1 Newsreader, Georgia, serif;
  letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.sj__lab {
  display: block; margin-top: 12px;
  font: 500 10.5px/1.5 Inter, sans-serif; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-faint);
}
.sj__sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* progress rail — how far the drawing has come (pinned mode only) */
.sj__prog { display: none; }
.sj--pin .sj__prog { display: block; position: relative; height: 1px; margin-top: 30px;
  background: var(--line); overflow: hidden; }
.sj__prog i { position: absolute; inset: 0; background: var(--bronze-deep);
  transform-origin: 0 50%; transform: scaleX(1); will-change: transform; }

/* ── pinned mode (≥941px, set by JS) ────────────────────────────────────── */
.sj--pin .sj__track { height: 260vh; height: 260svh; }       /* 100 stage + 160 travel */
.sj--pin .sj__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center;
  padding: 82px 0 0;                                            /* the stuck header */
}
.sj--pin .sj__grid { width: 100%; }
/* tracks overlap a little (see measure() in the JS): the transparent stage
   must not swallow clicks or text selection meant for what lies under it */
.sj--pin .sj__stage { pointer-events: none; }
.sj--pin .sj__grid > * { pointer-events: auto; }

/* ── live toggles (JS writes data-on) ───────────────────────────────────── */
.sj--live .sj-rise { transition: opacity .8s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.sj--live .sj-rise[data-on="false"] { opacity: 0; transform: translate3d(0, 18px, 0); transition-delay: 0s; }
.sj-pop { transform-box: fill-box; transform-origin: center;
  transition: opacity .5s var(--ease), transform .7s var(--ease); }
.sj--live .sj-pop[data-on="false"] { opacity: 0; transform: scale(.55); }
.sj-fade { transition: opacity .6s var(--ease); }
.sj--live .sj-fade[data-on="false"] { opacity: 0; }
.sj--live .sj-draw { stroke-dasharray: 1 2; stroke-dashoffset: 1.001; }
.sj-pulse[data-on="false"] { animation: none; }

/* finished state of the converge drawing: the tangle and the advisors have
   become the one line and the one node, so they are not drawn */
.sj-tangle, .sj-adv { opacity: 0; }
.sj--live .sj-adv { opacity: 1; }

/* ── drawing palette, by slab tone ──────────────────────────────────────── */
.sj__slab--dark {
  --sj-ink: #f8f3e8; --sj-dim: rgba(248, 243, 232, .56); --sj-faint: rgba(248, 243, 232, .17);
  --sj-scaf: rgba(248, 243, 232, .085); --sj-mess: rgba(248, 243, 232, .4);
  --sj-node: rgba(248, 243, 232, .5); --sj-node-dot: rgba(248, 243, 232, .78);
  --sj-bronze: #d8a24a; --sj-bronze-2: #c99a52;
  --sj-land: rgba(248, 243, 232, .24); --sj-land-fill: rgba(248, 243, 232, .035);
  --sj-bar-ink: #48413a; --sj-bar-range: #2f2922;          /* opaque: no darker overlap where caps meet */
  --sj-halo: #1d1711;
}
.sj__slab--light {
  --sj-ink: #151513; --sj-dim: rgba(93, 88, 80, .95); --sj-faint: rgba(21, 21, 19, .15);
  --sj-scaf: rgba(21, 21, 19, .075); --sj-mess: rgba(21, 21, 19, .36);
  --sj-node: rgba(21, 21, 19, .42); --sj-node-dot: rgba(21, 21, 19, .62);
  --sj-bronze: #a8762f; --sj-bronze-2: #b98739;
  --sj-land: rgba(21, 21, 19, .3); --sj-land-fill: rgba(168, 118, 47, .05);
  --sj-bar-ink: #cdc8bd; --sj-bar-range: #e3dfd5;
  --sj-halo: #f4f0e6;
}

/* ── drawing marks ──────────────────────────────────────────────────────── */
.sj-scaf * { stroke: var(--sj-scaf); stroke-width: 1; fill: none; }
.sj-spoke path { stroke: var(--sj-mess); stroke-width: 1.15; fill: none; stroke-linecap: round; }
.sj-one { stroke: var(--sj-bronze); stroke-width: 2; stroke-linecap: round; }
.sj-ring-o { fill: none; stroke: var(--sj-faint); stroke-width: 1; }
.sj-ring { fill: none; stroke: var(--sj-bronze-2); stroke-width: 1.3; }
.sj-dot { fill: var(--sj-bronze); }
.sj-ring-dim { fill: none; stroke: var(--sj-node); stroke-width: 1.1; }
.sj-dot-dim { fill: var(--sj-node-dot); }
.sj-dot-cream { fill: var(--sj-ink); }
.sj-pulse { fill: var(--sj-bronze); }
.sj-rule { stroke: var(--sj-faint); stroke-width: 1; }

.sj-land { stroke: var(--sj-land); stroke-width: 1.1; fill: none; stroke-linejoin: round; }
.sj-land-fill { fill: var(--sj-land-fill); stroke: none; }
.sj-tree { stroke: var(--sj-bronze); stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.sj-arc { stroke: var(--sj-bronze); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.sj-orbit { stroke: var(--sj-faint); stroke-width: 1; fill: none; }
.sj-axis, .sj-tick { stroke: var(--sj-faint); stroke-width: 1; fill: none; }
.sj-finish { stroke: var(--sj-bronze); stroke-width: 1; opacity: .7; fill: none; }
.sj-bar { stroke-width: 10; stroke-linecap: round; fill: none; }
.sj-bar--bronze { stroke: #c99a52; }
.sj-bar--ink { stroke: var(--sj-bar-ink); }
.sj-bar--range { stroke: var(--sj-bar-range); }

/* labels: Newsreader over Inter caps, with a halo in the slab's own colour
   so a label stays legible where a line passes under it (not a glow) */
.sj-t { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: 19px;
  letter-spacing: -.01em; fill: var(--sj-ink); }
.sj-t--lg, .sj-t--val { font-size: 22px; }
.sj-c { font-family: Inter, sans-serif; font-weight: 500; font-size: 10px;
  letter-spacing: 2.6px; fill: var(--sj-dim); }
.sj-c--tick { letter-spacing: 1.6px; }
.sj-halo { paint-order: stroke fill; stroke: var(--sj-halo); stroke-width: 6px; stroke-linejoin: round; }
.sj-c.sj-halo { stroke-width: 8px; }                           /* wide enough to close word gaps */

/* ── below 941px: stacked, drawing on top, plays once in view ───────────── */
@media (max-width: 940px) {
  .sj__grid, .sj__story--b .sj__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); }
  .sj__story--b .sj__slab { order: 0; }
  .sj__slab { width: 100%; max-width: 640px; }
  .sj__copy, .sj__story--a .sj__copy, .sj__story--b .sj__copy { justify-self: center; max-width: 640px; }
}
/* phones: the drawing scales to ~half, so its type steps up and the one
   optional subtitle steps out */
@media (max-width: 680px) {
  .sj__slab { border-radius: var(--r-lg); }
  .sj-t { font-size: 29px; }
  .sj-t--lg, .sj-t--val { font-size: 32px; }
  .sj-c { font-size: 16px; letter-spacing: 2.6px; }
  .sj-c--tick { font-size: 16px; letter-spacing: 1px; }
  .sj-c--opt { display: none; }
  .sj-halo, .sj-c.sj-halo { stroke-width: 10px; }
  .sj-one { stroke-width: 3; }
  .sj-arc { stroke-width: 2.8; }
  .sj-tree { stroke-width: 2.4; }
  .sj-spoke path { stroke-width: 1.4; }
  .sj__metrics { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sj-pulse { animation: none; }
}