/* Carver Journal Core: interactive graphics and scrollytelling. Loaded only where used. */
:root{
  --cjc-cranberry:#8b2345;
  --cjc-deep:#65162f;
  --cjc-blush:#f3dfe6;
  --cjc-paper:#fbf8f3;
  --cjc-ink:#151515;
  --cjc-muted:#706a65;
  --cjc-line:#d6cec8;
}

/* Interactive graphics */
.cjc-interactive{margin:1.5rem 0;max-width:100%}
.cjc-embed-frame{position:relative;width:100%;overflow:hidden;background:#eee;border-radius:6px}
.cjc-embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.cjc-flourish-frame{width:100%;min-width:0;overflow:hidden}
.cjc-flourish-frame .flourish-embed,
.cjc-flourish-frame iframe{max-width:100%}
.cjc-graphic-caption,
.cjc-step-visual figcaption{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin:.42rem 0 0;
  color:var(--cjc-muted);
  font-size:.72rem;
  line-height:1.4;
}
.cjc-graphic-source{font-weight:700}

/* Homepage graphic replacement */
.cjc-home-media{width:100%}
.cjc-context-homepage{margin:0}
.cjc-context-homepage .cjc-embed-frame{border-radius:4px}
.cjc-context-homepage .cjc-graphic-caption{display:none}
.cjc-context-homepage .cjc-flourish-frame{min-height:180px}
.cjc-home-fallback{display:none}

/* Scrolly shell */
.cjc-scrolly{
  --cjc-overlay-alpha:.3;
  position:relative;
  isolation:isolate;
  width:min(1180px,calc(100vw - 2rem));
  max-width:none;
  margin:3.5rem 0 3.5rem 50%;
  transform:translateX(-50%);
  overflow:clip;
  background:transparent;
}
.cjc-scrolly-bg,
.cjc-scrolly-scene-bg,
.cjc-scrolly-shade{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.cjc-scrolly-bg-image,
.cjc-scrolly-scene-bg.is-image{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.cjc-scrolly-bg-embed{overflow:hidden}
.cjc-scrolly-bg-embed .cjc-interactive{
  position:absolute;
  inset:0;
  margin:0;
  width:100%;
  height:100%;
}
.cjc-scrolly-bg-embed .cjc-embed-frame,
.cjc-scrolly-bg-embed .cjc-flourish-frame,
.cjc-scrolly-bg-embed iframe{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
}
.cjc-scrolly-bg-embed iframe{position:absolute!important;inset:0!important}
.cjc-scrolly-scene-bg{
  opacity:0;
  transition:opacity .4s ease,background-color .4s ease;
}
.cjc-scrolly-scene-bg.is-active{opacity:1}
.cjc-scrolly-shade{background:rgba(0,0,0,var(--cjc-overlay-alpha))}
.cjc-bg-transparent .cjc-scrolly-shade,
.cjc-bg-color .cjc-scrolly-shade{display:none}

.cjc-scrolly-label{
  position:relative;
  z-index:4;
  margin:0 0 .8rem;
  padding-top:.5rem;
  color:var(--cjc-cranberry);
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.cjc-text-tone-light{color:#fff}
.cjc-text-tone-light .cjc-scrolly-label{color:#fff}
.cjc-text-tone-dark{color:var(--cjc-ink)}

.cjc-scrolly-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
  gap:3rem;
  align-items:start;
}
.cjc-scrolly-left .cjc-scrolly-copy{grid-column:2}
.cjc-scrolly-left .cjc-scrolly-stage{grid-column:1;grid-row:1}

.cjc-scrolly-stage{
  position:sticky;
  top:80px;
  min-height:68vh;
  display:flex;
  align-items:center;
  min-width:0;
}
.cjc-scrolly-stage-inner{
  width:100%;
  min-width:0;
  transition:opacity .28s ease,transform .38s cubic-bezier(.16,1,.3,1);
}
.cjc-scrolly-stage-inner.is-changing{opacity:.25}
.cjc-scrolly-stage-inner.transition-slide.is-changing{transform:translate3d(22px,0,0)}
.cjc-scrolly-stage-inner.transition-zoom.is-changing{transform:scale(.965)}
.cjc-stage-visual{margin:0;width:100%}
.cjc-stage-visual img{display:block;width:100%;height:auto;border-radius:5px}
.cjc-stage-embed{position:relative;width:100%;overflow:hidden;border-radius:5px;background:#eee}
.cjc-stage-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.cjc-stage-visual figcaption{margin-top:.42rem}

/* Scrolly steps */
.cjc-scrolly-step{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2rem 0;
  opacity:.58;
  transition:opacity .3s ease;
}
.cjc-scrolly-step.is-active{opacity:1}
.cjc-step-narrative{
  width:100%;
  font-size:1.06rem;
  line-height:1.68;
}
.cjc-step-narrative p{margin:.75rem 0}
.cjc-text-width-narrow .cjc-step-narrative{max-width:420px}
.cjc-text-width-standard .cjc-step-narrative{max-width:580px}
.cjc-text-width-wide .cjc-step-narrative{max-width:760px}

.cjc-text-position-left{align-items:flex-start}
.cjc-text-position-center{align-items:center}
.cjc-text-position-right{align-items:flex-end}
.cjc-text-align-left .cjc-step-narrative{text-align:left}
.cjc-text-align-center .cjc-step-narrative{text-align:center}
.cjc-text-align-right .cjc-step-narrative{text-align:right}

.cjc-text-style-paper .cjc-step-narrative,
.cjc-text-style-dark .cjc-step-narrative{
  padding:1.2rem 1.3rem;
  border-radius:4px;
}
.cjc-text-style-paper .cjc-step-narrative{
  color:var(--cjc-ink);
  background:rgba(251,248,243,.94);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.cjc-text-style-dark .cjc-step-narrative{
  color:#fff;
  background:rgba(21,21,21,.88);
}

.cjc-step-inline-visual{display:none}

/* Centered/text-led layout */
.cjc-scrolly-center{
  width:min(960px,calc(100vw - 2rem));
}
.cjc-scrolly-center .cjc-scrolly-grid{display:block}
.cjc-scrolly-center .cjc-scrolly-stage{display:none}
.cjc-scrolly-center .cjc-scrolly-copy{width:100%}
.cjc-scrolly-center .cjc-scrolly-step{
  min-height:52vh;
  padding:3.5rem 1rem;
}
.cjc-scrolly-center .cjc-step-inline-visual{
  display:block;
  width:min(820px,100%);
  margin:1.25rem auto 0;
}
.cjc-scrolly-center .cjc-step-inline-visual:empty{display:none}
.cjc-scrolly-center .cjc-step-inline-visual img{
  display:block;
  width:100%;
  height:auto;
  border-radius:5px;
}
.cjc-scrolly-center .cjc-step-inline-visual .cjc-interactive{margin:0}

/* Full-background/overlay layout */
.cjc-scrolly-overlay{
  width:min(1280px,calc(100vw - 1rem));
  min-height:80vh;
}
.cjc-scrolly-overlay .cjc-scrolly-grid{display:block}
.cjc-scrolly-overlay .cjc-scrolly-stage{
  position:sticky;
  z-index:1;
  top:70px;
  width:100%;
  height:78vh;
  min-height:520px;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  background:rgba(0,0,0,.06);
}
.cjc-scrolly-overlay .cjc-scrolly-stage-inner,
.cjc-scrolly-overlay .cjc-stage-visual,
.cjc-scrolly-overlay .cjc-stage-visual img,
.cjc-scrolly-overlay .cjc-stage-embed{
  width:100%;
  height:100%;
}
.cjc-scrolly-overlay .cjc-stage-visual img{object-fit:cover;border-radius:0}
.cjc-scrolly-overlay .cjc-stage-embed{aspect-ratio:auto!important;border-radius:0}
.cjc-scrolly-overlay .cjc-scrolly-copy{
  position:relative;
  z-index:3;
  margin-top:-78vh;
}
.cjc-scrolly-overlay .cjc-scrolly-step{
  min-height:78vh;
  padding:4rem clamp(1rem,5vw,4rem);
}
.cjc-scrolly-overlay .cjc-step-narrative{
  position:relative;
  z-index:4;
}
.cjc-scrolly-overlay.cjc-text-tone-light .cjc-text-style-plain .cjc-step-narrative{
  text-shadow:0 1px 8px rgba(0,0,0,.48);
}

/* Flourish inside article/scrolly */
.cjc-step-visual .cjc-interactive{margin:0}

/* Mobile */
@media(max-width:760px){
  .cjc-home-mobile-featured .cjc-home-interactive{display:none}
  .cjc-home-mobile-featured .cjc-home-fallback{display:block}

  .cjc-scrolly,
  .cjc-scrolly-center,
  .cjc-scrolly-overlay{
    width:auto;
    max-width:none;
    margin:2.2rem 0;
    transform:none;
    overflow:hidden;
  }

  .cjc-scrolly-grid,
  .cjc-scrolly-left .cjc-scrolly-grid,
  .cjc-scrolly-overlay .cjc-scrolly-grid{
    display:block;
  }

  .cjc-scrolly-stage,
  .cjc-scrolly-overlay .cjc-scrolly-stage{
    display:none;
  }

  .cjc-scrolly-overlay .cjc-scrolly-copy{margin-top:0}

  .cjc-scrolly-step,
  .cjc-scrolly-center .cjc-scrolly-step,
  .cjc-scrolly-overlay .cjc-scrolly-step{
    min-height:0;
    padding:1.5rem 0 2rem;
    opacity:1;
  }

  .cjc-scrolly-overlay .cjc-scrolly-step{
    padding-left:.8rem;
    padding-right:.8rem;
  }

  .cjc-step-inline-visual{
    display:block;
    width:100%;
    margin-top:1rem;
  }
  .cjc-step-inline-visual:empty{display:none}
  .cjc-step-inline-visual img{display:block;width:100%;height:auto;border-radius:5px}
  .cjc-step-inline-visual .cjc-interactive{margin:0}

  .cjc-step-narrative{font-size:1rem}
  .cjc-text-width-narrow .cjc-step-narrative,
  .cjc-text-width-standard .cjc-step-narrative,
  .cjc-text-width-wide .cjc-step-narrative{max-width:100%}

  .cjc-text-position-right,
  .cjc-text-position-center,
  .cjc-text-position-left{align-items:stretch}

  .cjc-text-style-paper .cjc-step-narrative,
  .cjc-text-style-dark .cjc-step-narrative{padding:1rem}

  .cjc-scrolly-bg-embed{opacity:.45}
}

@media(prefers-reduced-motion:reduce){
  .cjc-scrolly-stage-inner,
  .cjc-scrolly-step,
  .cjc-scrolly-scene-bg{transition:none!important}
}


/* =========================================================
   v0.3 SCROLLY ALIGNMENT + NARRATIVE MOTION
   ========================================================= */

/*
 * Make the scrolly a true viewport-width canvas instead of centering a
 * wide child relative to the article column. The inner grid is then
 * explicitly centered inside that canvas. This avoids "centered" content
 * being centered inside a left-shifted article container.
 */
.cjc-scrolly{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:0;
  transform:none;
  overflow-x:clip;
}

.cjc-scrolly-label{
  width:min(1180px,calc(100% - 2rem));
  margin-left:auto;
  margin-right:auto;
}

.cjc-scrolly-grid{
  width:min(1180px,calc(100% - 2rem));
  margin-left:auto;
  margin-right:auto;
}

/* Split layouts remain balanced around the actual viewport center. */
.cjc-scrolly-right .cjc-scrolly-grid,
.cjc-scrolly-left .cjc-scrolly-grid{
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
}

/* Centered mode: force the content canvas itself to the center. */
.cjc-scrolly-center .cjc-scrolly-grid{
  display:block;
  width:min(960px,calc(100% - 2rem));
  margin-left:auto;
  margin-right:auto;
}
.cjc-scrolly-center .cjc-scrolly-copy{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.cjc-scrolly-center .cjc-scrolly-step{
  width:100%;
  align-items:center !important;
  padding-left:1rem;
  padding-right:1rem;
}
.cjc-scrolly-center .cjc-step-narrative{
  margin-left:auto;
  margin-right:auto;
}
.cjc-scrolly-center .cjc-step-inline-visual{
  margin-left:auto;
  margin-right:auto;
}
.cjc-scrolly-center .cjc-step-inline-visual img,
.cjc-scrolly-center .cjc-step-inline-visual .cjc-interactive{
  margin-left:auto;
  margin-right:auto;
}

/* Overlay mode is intentionally full-canvas. */
.cjc-scrolly-overlay .cjc-scrolly-grid{
  width:100%;
  max-width:none;
  margin:0;
}
.cjc-scrolly-overlay .cjc-scrolly-label{
  width:min(1180px,calc(100% - 2rem));
}

/*
 * Narrative visibility is controlled only after JS initializes the scrolly.
 * If JavaScript fails, all text remains readable.
 */
.cjc-scrolly.is-ready:not(.cjc-text-animation-none) .cjc-step-narrative{
  opacity:0;
  will-change:opacity,transform;
  transition:
    opacity .5s ease,
    transform .68s cubic-bezier(.16,1,.3,1);
}

.cjc-scrolly.is-ready:not(.cjc-text-animation-none) .cjc-scrolly-step.is-active .cjc-step-narrative{
  opacity:1;
  transform:none;
}

/* Default: fade + rise. Future text waits slightly below; past text leaves upward. */
.cjc-scrolly.is-ready.cjc-text-animation-rise .cjc-scrolly-step.is-after .cjc-step-narrative{
  transform:translate3d(0,34px,0);
}
.cjc-scrolly.is-ready.cjc-text-animation-rise .cjc-scrolly-step.is-before .cjc-step-narrative{
  transform:translate3d(0,-26px,0);
}

/* Fade-only. */
.cjc-scrolly.is-ready.cjc-text-animation-fade .cjc-step-narrative{
  transform:none;
}

/* Slide from left; completed text exits gently to the right. */
.cjc-scrolly.is-ready.cjc-text-animation-left .cjc-scrolly-step.is-after .cjc-step-narrative{
  transform:translate3d(-44px,0,0);
}
.cjc-scrolly.is-ready.cjc-text-animation-left .cjc-scrolly-step.is-before .cjc-step-narrative{
  transform:translate3d(28px,0,0);
}

/* Slide from right; completed text exits gently to the left. */
.cjc-scrolly.is-ready.cjc-text-animation-right .cjc-scrolly-step.is-after .cjc-step-narrative{
  transform:translate3d(44px,0,0);
}
.cjc-scrolly.is-ready.cjc-text-animation-right .cjc-scrolly-step.is-before .cjc-step-narrative{
  transform:translate3d(-28px,0,0);
}

.cjc-scrolly.cjc-text-animation-none .cjc-step-narrative{
  opacity:1;
  transform:none;
}

/* In centered mode, inline visuals participate in the same active-step rhythm. */
.cjc-scrolly-center.is-ready:not(.cjc-text-animation-none) .cjc-step-inline-visual{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:
    opacity .48s ease,
    transform .64s cubic-bezier(.16,1,.3,1);
}
.cjc-scrolly-center.is-ready:not(.cjc-text-animation-none) .cjc-scrolly-step.is-active .cjc-step-inline-visual{
  opacity:1;
  transform:none;
}

/* Give animated text-only scrollys enough vertical runway to actually animate. */
.cjc-scrolly-center:not(.cjc-text-animation-none) .cjc-scrolly-step{
  min-height:62vh;
}

/* Stronger visual transition so changing sticky images/graphics feels intentional. */
.cjc-scrolly-stage-inner{
  transition:
    opacity .38s ease,
    transform .48s cubic-bezier(.16,1,.3,1);
}
.cjc-scrolly-stage-inner.is-changing{
  opacity:0;
}
.cjc-scrolly-stage-inner.transition-slide.is-changing{
  transform:translate3d(28px,0,0);
}
.cjc-scrolly-stage-inner.transition-zoom.is-changing{
  transform:scale(.94);
}

/* Mobile keeps the animation, but uses gentler movement and proper viewport centering. */
@media(max-width:760px){
  .cjc-scrolly,
  .cjc-scrolly-center,
  .cjc-scrolly-overlay{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:0;
    transform:none;
  }

  .cjc-scrolly-grid,
  .cjc-scrolly-center .cjc-scrolly-grid,
  .cjc-scrolly-overlay .cjc-scrolly-grid{
    width:calc(100% - 2rem);
    margin-left:auto;
    margin-right:auto;
  }

  .cjc-scrolly-overlay .cjc-scrolly-grid{
    width:100%;
  }

  .cjc-scrolly-label{
    width:calc(100% - 2rem);
  }

  .cjc-scrolly:not(.cjc-text-animation-none) .cjc-scrolly-step,
  .cjc-scrolly-center:not(.cjc-text-animation-none) .cjc-scrolly-step,
  .cjc-scrolly-overlay:not(.cjc-text-animation-none) .cjc-scrolly-step{
    min-height:48vh;
    justify-content:center;
  }

  .cjc-scrolly.is-ready.cjc-text-animation-rise .cjc-scrolly-step.is-after .cjc-step-narrative{
    transform:translate3d(0,22px,0);
  }
  .cjc-scrolly.is-ready.cjc-text-animation-rise .cjc-scrolly-step.is-before .cjc-step-narrative{
    transform:translate3d(0,-16px,0);
  }

  .cjc-scrolly-center .cjc-step-inline-visual{
    width:100%;
  }
}

/* Motion accessibility: no disappearing narrative when reduced motion is requested. */
@media(prefers-reduced-motion:reduce){
  .cjc-scrolly.is-ready .cjc-step-narrative,
  .cjc-scrolly-center.is-ready .cjc-step-inline-visual{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* Uploaded HTML graphics (v0.10) */
.cjc-html-frame{position:relative;width:100%;overflow:hidden;background:transparent;border-radius:0}
.cjc-html-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent}

/* v0.12: frames that fit their chart. */
.cjc-embed-frame.is-sized{aspect-ratio:auto !important}
.cjc-autosize-frame{background:transparent}
.cjc-autosize-frame iframe{background:transparent}
.cjc-embed-frame.is-capped iframe{overflow:auto}
.cjc-context-homepage .cjc-flourish-frame{max-height:90vh;overflow:auto}

/* v0.12: when the top story on the front page carries a chart, give the chart the wider column
   so it comes out wider and shorter, like a photo. The rows below simply move down to make room. */
@media (min-width: 761px){
  .cj-lead:has(.cj-lead-media .cjc-home-media){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .cj-lead-media:has(.cjc-home-media){min-height:0}
}