/* Progressive enhancement: the complete five-layer story is readable without JS. */
.cap-story { --cap-accent: #79dfff; position: relative; background: #080b12; border-block: 1px solid #ffffff16; }
.cap-pin { padding-block: 80px; }
.cap-kicker, .cap-count, .cap-layer-bar, .cap-tags, .cap-scroll-cue { font-family: var(--mono); }
.cap-kicker { font-size: .65rem; letter-spacing: .17em; color: #a1b4c8; }
.cap-intro h2 { margin: 18px 0 0; font: 400 clamp(2.5rem, 4vw, 4rem)/1.04 var(--serif); letter-spacing: -.045em; }
.cap-intro h2 em { color: #8d9cab; font-weight: 400; }
.cap-layout { margin-top: 48px; }
.cap-narrative, .cap-scroll-cue { display: none; }
.cap-deck { display: grid; gap: 40px; }
.cap-layer { min-width: 0; border: 1px solid color-mix(in srgb, var(--layer-accent) 35%, #1c2535); border-radius: 18px; background: #0e1420; overflow: hidden; }
.cap-layer-bar { display: flex; justify-content: space-between; gap: 12px; padding: 20px 24px; color: var(--layer-accent); font-size: .65rem; letter-spacing: .09em; border-bottom: 1px solid #ffffff12; }
.cap-layer-bar > span:last-child { color: #778598; font-size: .55rem; }
.cap-layer figure { margin: 0; }
.cap-layer img { width: 100%; height: auto; aspect-ratio: 1600 / 820; object-fit: contain; }
.cap-layer figcaption { padding: 24px; border-top: 1px solid #ffffff12; }
.cap-card-copy h3 { margin: 0; font: 400 2rem/1.12 var(--serif); }
.cap-card-copy p { color: #b4beca; line-height: 1.7; max-width: 65ch; }
.cap-tags { margin: 0; color: var(--layer-accent); font-size: .64rem; line-height: 1.6; }

@media (prefers-reduced-motion: no-preference) {
  .cap-story.is-scroll-story { height: 480vh; height: 480svh; }
  .is-scroll-story .cap-pin { position: sticky; top: 76px; height: calc(100svh - 76px); padding-block: clamp(24px, 4vh, 42px) 24px; display: flex; flex-direction: column; }
  .is-scroll-story .cap-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.65fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 26px; }
  .is-scroll-story .cap-narrative { display: block; position: relative; z-index: 8; }
  .cap-count { display: flex; align-items: center; gap: 10px; color: #66798e; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
  .cap-count > span:first-child { color: var(--cap-accent); font-size: 1rem; }
  .cap-count > span:last-child { color: var(--cap-accent); }
  .cap-count i { width: 26px; height: 1px; background: #ffffff30; }
  .cap-current-copy { min-height: 178px; margin-top: 22px; }
  .cap-current-copy h3 { margin: 0; font: 400 clamp(1.8rem, 2.7vw, 2.7rem)/1.1 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
  .cap-current-copy p { margin: 18px 0 0; max-width: 39ch; color: #aebaca; font-size: .92rem; line-height: 1.7; }
  .cap-steps { display: grid; margin-top: 20px; }
  .cap-steps button { display: flex; gap: 16px; align-items: center; width: 100%; min-height: 39px; padding: 9px 0; border: 0; border-bottom: 1px solid #ffffff12; background: transparent; text-align: left; cursor: pointer; color: #8593a4; }
  .cap-steps button > span { font: .58rem var(--mono); opacity: .55; }
  .cap-steps button b { font-weight: 500; font-size: .77rem; }
  .cap-steps button i { margin-left: auto; font-style: normal; opacity: 0; }
  .cap-steps button[aria-current="step"] { color: var(--cap-accent); border-color: var(--cap-accent); }
  .cap-steps button[aria-current="step"] i { opacity: 1; }
  .cap-steps button:hover { color: #fff; }
  .is-scroll-story .cap-deck { position: relative; display: block; width: 100%; max-width: calc((100svh - 350px) * 1.9); justify-self: center; height: min(100%, 550px); perspective: 1400px; isolation: isolate; overflow: clip; overflow-clip-margin: 16px; }
  .is-scroll-story .cap-deck::before { content: ""; position: absolute; inset: -4% -4%; background: radial-gradient(ellipse at 58% 50%, color-mix(in srgb, var(--cap-accent) 12%, transparent), transparent 66%); pointer-events: none; }
  .is-scroll-story .cap-deck::after { content: ""; position: absolute; z-index: -1; inset: 8% 4%; border: 1px solid #ffffff0b; border-radius: 50%; transform: rotate(-18deg); pointer-events: none; }
  .is-scroll-story .cap-layer { position: absolute; top: 50%; left: 0; width: 100%; opacity: 0; transform-origin: 50% 60%; box-shadow: 0 26px 60px #0006, 0 0 40px #79dfff05; will-change: transform, opacity; }
  .is-scroll-story .cap-layer-bar { padding: 15px 20px; }
  .is-scroll-story .cap-layer figcaption { padding: 15px 20px; }
  .is-scroll-story .cap-card-copy { display: none; }
  .is-scroll-story .cap-scroll-cue { display: flex; align-items: center; gap: 24px; margin-top: 24px; font-size: .59rem; letter-spacing: .08em; color: #8392a4; }
  .cap-progress { flex: 1; height: 1px; background: #ffffff1c; }
  .cap-progress i { display: block; width: 100%; height: 100%; background: var(--cap-accent); transform: scaleX(var(--cap-progress, 0)); transform-origin: left; }
}
@media (min-width: 801px) and (max-height: 640px) {
  .is-scroll-story .cap-pin { padding-top: 18px; padding-bottom: 16px; }
  .is-scroll-story .cap-intro h2 { margin-top: 10px; font-size: 2rem; }
  .is-scroll-story .cap-current-copy { min-height: 0; }
  .is-scroll-story .cap-current-copy h3 { font-size: 1.7rem; }
  .is-scroll-story .cap-steps { display: flex; gap: 8px; margin-top: 22px; }
  .is-scroll-story .cap-steps button { flex: 1; justify-content: center; min-height: 36px; border: 1px solid #ffffff25; }
  .is-scroll-story .cap-steps button b, .is-scroll-story .cap-steps button i { display: none; }
  .is-scroll-story .cap-steps button[aria-current="step"] { border-color: var(--cap-accent); }
}
@media (min-width: 981px) and (max-height: 760px) {
  .is-scroll-story .cap-intro h2 { font-size: 2.6rem; }
  .is-scroll-story .cap-current-copy { min-height: 148px; margin-top: 16px; }
  .is-scroll-story .cap-current-copy h3 { font-size: 1.95rem; }
  .is-scroll-story .cap-current-copy p { margin-top: 12px; font-size: .83rem; line-height: 1.6; }
  .is-scroll-story .cap-steps { margin-top: 10px; }
  .is-scroll-story .cap-steps button { min-height: 31px; padding-block: 6px; }
}
@media (max-width: 600px) {
  .cap-pin { padding-block: 58px; }
  .cap-intro h2 { font-size: 2.65rem; }
  .cap-layout { margin-top: 32px; }
  .cap-deck { gap: 24px; }
  .cap-layer-bar { padding: 16px; font-size: .6rem; }
  .cap-layer-bar > span:last-child { display: none; }
  .cap-layer figcaption { padding: 20px 16px; }
  .cap-card-copy h3 { font-size: 1.75rem; }
  .cap-card-copy p { font-size: .88rem; }
  .cap-tags { font-size: .58rem; }
}
@media (max-width: 800px) {
  .is-scroll-story .cap-pin { top: 64px; height: calc(100svh - 64px); padding-block: 18px 14px; }
  .is-scroll-story .cap-intro h2 { margin-top: 10px; font-size: clamp(1.65rem, 6.5vw, 2.5rem); }
  .is-scroll-story .cap-kicker { font-size: .53rem; }
  .is-scroll-story .cap-layout { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; align-items: stretch; }
  .is-scroll-story .cap-count { font-size: .55rem; }
  .is-scroll-story .cap-count > span:first-child { font-size: .78rem; }
  .is-scroll-story .cap-current-copy { min-height: 116px; margin-top: 12px; }
  .is-scroll-story .cap-current-copy h3 { font-size: 1.5rem; text-wrap: initial; }
  .is-scroll-story .cap-current-copy p { max-width: none; margin-top: 8px; font-size: .77rem; line-height: 1.55; }
  .is-scroll-story .cap-steps { display: flex; gap: 8px; margin-top: 8px; }
  .is-scroll-story .cap-steps button { flex: 1; justify-content: center; min-height: 34px; padding: 8px 0; border: 1px solid #ffffff25; border-radius: 4px; }
  .is-scroll-story .cap-steps button b, .is-scroll-story .cap-steps button i { display: none; }
  .is-scroll-story .cap-steps button[aria-current="step"] { border-color: var(--cap-accent); background: #ffffff06; }
  .is-scroll-story .cap-deck { flex: 1; min-height: 0; max-width: min(100%, calc((100svh - 410px) * 1.65)); align-self: center; }
  .is-scroll-story .cap-layer-bar { padding: 12px; font-size: .55rem; }
  .is-scroll-story .cap-layer-bar > span:last-child { display: none; }
  .is-scroll-story .cap-layer figcaption { padding: 12px; }
  .is-scroll-story .cap-tags { font-size: .52rem; }
  .is-scroll-story .cap-scroll-cue { margin-top: 16px; gap: 12px; font-size: .48rem; }
}