.card-story { padding-bottom: 0; }
.card-sequence { position: relative; }
.card-scene { position: sticky; top: var(--header); height: calc(100svh - var(--header) - 16px); margin-bottom: calc(-100svh + var(--header) + 16px); z-index: 1; pointer-events: none; }
.card-canvas { display: none; width: 100%; height: 100%; }
.card-scene[data-renderer="webgl"] .card-canvas { display: block; }
.card-scene[data-renderer="webgl"] .card-fallback { display: none; }
.card-fallback { position: absolute; right: 0; top: 20%; width: 46%; }
.card-fallback img { width: 100%; height: auto; box-shadow: 0 24px 40px #08080725; }
.card-fallback img:last-child { display: none; }
.card-scene[data-face="back"] .card-fallback img:first-child { display: none; }
.card-scene[data-face="back"] .card-fallback img:last-child { display: block; }
.card-step { --card-type-size: 40px; --card-copy-size: 32px; position: relative; z-index: 2; min-height: 100svh; display: grid; grid-template-columns: 42% 16% 42%; align-items: center; pointer-events: none; }
.card-step-copy { grid-column: 1; padding: 48px 0; color: var(--world-text,var(--ink)); }
.card-step-right .card-step-copy { grid-column: 3; }
body main .card-step h3 { margin: 0 0 24px; font-size: var(--card-type-size) !important; font-weight: 700 !important; line-height: 1.15 !important; }
body main .card-step p:not(.stage-label) { font-size: var(--card-copy-size) !important; font-weight: 400 !important; line-height: 1.5; max-width: 42ch; margin: 0; }
.card-step .stage-label { color: #cf3102; }
@media (max-width: 1023px) {
  .card-step { --card-type-size: 36px; --card-copy-size: 28px; }
}
@media (max-width: 680px) {
  .card-step { --card-type-size: 32px; --card-copy-size: 24px; }
  .card-story .section-intro { padding-top: 0; }
  .card-scene { height: calc(100svh - var(--header) - 16px); }
  .card-step { min-height: 110svh; display: block; padding-top: 470px; }
  .card-step-copy { padding: 28px 0 80px; }
  .card-fallback { width: 100%; top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-step { min-height: 80svh; }
  .card-step h3 { transform: none; opacity: 1; }
}