/* One scroll-driven stage. The normal document flow is the motion-free fallback. */
.kd-story {
  --story-inset: clamp(28px, 6svh, 72px);
  position: relative;
  background: var(--cocoa);
  color: var(--cocoa);
  isolation: isolate;
}
.kd-story-stage { position: relative; }
.kd-story-title {
  position: sticky; top: var(--nav-height); z-index: 4;
  margin: 0; padding: clamp(22px, 4svh, 48px) var(--gutter);
  background: var(--cocoa); color: var(--cream);
  font-size: clamp(35px, 7vw, 112px); font-weight: 800;
  line-height: 1.04; letter-spacing: -.03em; word-spacing: .05em; text-align: center; text-wrap: balance;
}
.kd-story-scene {
  position: relative; min-height: 600px; height: 100svh;
  isolation: isolate; overflow: clip;
}
.kd-story-image {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--image-position, 50% 50%);
}
.kd-story-scene::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #2A1A1230, transparent 32%, transparent 60%, #2A1A1252);
}
.kd-story-caption {
  position: absolute; left: var(--gutter); bottom: var(--story-inset); z-index: 2;
  width: min(44.1%, 595px); padding: clamp(23.8px, 2.52vw, 43.4px) clamp(19.6px, 2.66vw, 47.6px);
  isolation: isolate;
}
.kd-story-caption::before, .kd-story-caption::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: var(--button-clip); background: var(--cream);
}
.kd-story-caption::before { background: var(--orange); transform: translate(5.6px, 5.6px); z-index: -2; }
.kd-story-caption h2, .kd-story-caption h3 {
  font-size: clamp(23.8px, 2.905vw, 46.2px); line-height: 1.04; letter-spacing: -.045em;
  font-weight: 800; text-wrap: balance;
}
.kd-story-skip {
  position: absolute; z-index: 6; top: 14px; right: var(--gutter); padding: 12px 18px;
  background: var(--cream); color: var(--cocoa); font-size: 16px; opacity: 0;
  pointer-events: none;
}
.kd-story-skip:focus-visible { opacity: 1; pointer-events: auto; }

/* Pinning does not intercept the wheel: the existing page scroll drives everything. */
.kd-story.is-enhanced { height: 340svh; }
.kd-story.is-enhanced .kd-story-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.kd-story.is-enhanced .kd-story-stage::after {
  content: ''; position: absolute; inset: 0 0 auto; height: min(45svh, 420px); z-index: 3;
  background: linear-gradient(180deg, #2A1A12B3, #2A1A123D 68%, transparent);
  pointer-events: none;
}
.kd-story.is-enhanced .kd-story-title {
  position: absolute; top: calc(var(--nav-height) + clamp(22px, 4svh, 48px));
  left: var(--gutter); right: var(--gutter); padding: 0; background: none;
  pointer-events: none;
}
.kd-story.is-enhanced .kd-story-skip { top: calc(var(--nav-height) + 22px); }
.kd-story.is-enhanced .kd-story-scenes { position: absolute; inset: 0; }
.kd-story.is-enhanced .kd-story-scene {
  position: absolute; inset: 0; min-height: 0; height: 100%;
  clip-path: var(--scene-clip, polygon(113% 0, 120% 0, 120% 100%, 103% 100%));
}
.kd-story.is-enhanced .kd-story-scene:first-child { --scene-clip: inset(0); --copy-opacity: 1; }
.kd-story.is-enhanced .kd-story-image {
  inset: -3% -10%; width: 120%; height: 106%;
  transform: translate3d(var(--image-x, 0%), 0, 0) scale(var(--image-scale, 1.02));
}
.kd-story.is-enhanced .kd-story-caption {
  opacity: var(--copy-opacity, 0);
  transform: translate3d(var(--copy-x, 0px), var(--copy-y, 0px), 0);
}
.kd-story.is-enhanced.is-in-view .kd-story-scene { will-change: clip-path; }
.kd-story.is-enhanced.is-in-view .kd-story-image,
.kd-story.is-enhanced.is-in-view .kd-story-caption { will-change: transform, opacity; }

@media (max-width: 900px) {
  .kd-story-caption { width: min(56%, 490px); }
}
@media (max-width: 650px) {
  .kd-story { --story-inset: max(84px, env(safe-area-inset-bottom)); }
  .kd-story-scene { min-height: 520px; height: 90svh; }
  .kd-story-caption { width: calc(70% - 1.4 * var(--gutter) - 5.6px); padding: 21px 19.6px; }
  .kd-story-caption h2, .kd-story-caption h3 { font-size: clamp(19.6px, 5.32vw, 29.4px); }
  .kd-story.is-enhanced { height: 310svh; }
  .kd-story.is-enhanced .kd-story-skip { top: calc(var(--nav-height) + 8px); right: 12px; }
}
@media (max-height: 600px) and (min-width: 651px) {
  .kd-story { --story-inset: 28px; }
  .kd-story-caption { width: 49%; padding: 17.5px 22.4px; }
  .kd-story-caption h2, .kd-story-caption h3 { font-size: clamp(18.2px, 2.38vw, 26.6px); }
}
@media (forced-colors: active) {
  .kd-story-caption { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .kd-story-caption::before, .kd-story-caption::after { display: none; }
}