/* Three focused alternatives for the four-perspective navigation. */
.story-design{gap:75px;position:relative;padding-top:105px}.story-design .story-guide{top:145px}.story-design .story-guide h2{font-size:clamp(40px,3.8vw,58px);line-height:1.06;text-wrap:balance}.story-design .story-guide>p{margin:18px 0 0}.perspective-switch{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:-35px;font-size:12px}.perspective-switch>span{margin-right:auto;color:var(--muted)}.perspective-switch a{padding:12px 16px;border:1px solid var(--line);min-height:44px}.perspective-switch a[aria-current=page]{color:var(--accent);border-color:var(--accent)}
.story-nav.perspective-nav{margin-top:25px;position:relative}.perspective-nav .perspective-link{padding:0;isolation:isolate;color:var(--text);border:0;overflow:hidden;transition:background .3s,outline-color .3s;outline:1px solid transparent;outline-offset:3px}.perspective-nav .perspective-link:after{display:none}.perspective-link:focus-visible{outline:2px solid var(--accent)}.perspective-icon{width:30px;height:30px;display:block}.perspective-symbol{color:var(--accent);flex-shrink:0}.perspective-label strong{font-weight:400;display:block;font-size:16px}.perspective-label>span{display:block;font-size:11px;line-height:1.5;margin-top:5px;color:#d3dfeb}.perspective-thumb{display:block;object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.16,1,.3,1),filter .35s}.perspective-arrow{width:19px;height:19px;flex-shrink:0;color:var(--accent);transition:transform .25s}.perspective-link:hover .perspective-arrow,.perspective-link[aria-current=step] .perspective-arrow{transform:translateX(3px)}
/* 1: photographic windows, active corner lines and light tracing the field. */
.story-nav.perspective-nav--1{display:grid;grid-template-columns:1fr 1fr;gap:12px}.perspective-nav--1 .perspective-link{min-height:162px;display:flex;align-items:end;padding:20px 15px;background:#142438}.perspective-nav--1 .perspective-thumb{position:absolute;inset:0;z-index:-2;filter:brightness(.8) saturate(.65)}.perspective-nav--1 .perspective-link:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#081523f5 0%,#08152340 80%)}.perspective-nav--1 .perspective-symbol{position:absolute;top:16px;left:15px}.perspective-nav--1 .perspective-arrow{position:absolute;right:13px;top:21px}.perspective-nav--1 .perspective-label strong{font-family:Barlow;font-size:23px;line-height:1.05;max-width:14ch}.perspective-nav--1 .perspective-link:hover .perspective-thumb,.perspective-nav--1 .perspective-link[aria-current=step] .perspective-thumb{transform:scale(1.055);filter:brightness(1) saturate(.9)}.perspective-nav--1 .perspective-link[aria-current=step]{outline-color:var(--accent)}
/* 2: a real pitch schematic connects four viewpoints, without invented scores. */
.story-nav.perspective-nav--2{display:grid;grid-template-columns:1fr 1fr;gap:76px 48px;padding:17px 0;background:#102032}.connection-field{position:absolute;inset:0;width:100%;height:100%;stroke:#86c5ff24;stroke-width:1}.field-route{stroke:#86c5ff80;stroke-dasharray:5 8}.field-centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:11px;color:var(--accent);pointer-events:none}.field-centre svg{width:29px;height:29px}.perspective-nav--2 .perspective-link{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;padding:12px;background:#0b1420ed;margin:0 12px;overflow:visible;box-shadow:0 8px 22px #05101c55;min-height:130px}.perspective-nav--2 .perspective-thumb{grid-column:1/-1;height:65px;filter:brightness(.65) saturate(.4)}.perspective-nav--2 .perspective-icon{width:27px;height:27px}.perspective-nav--2 .perspective-label strong{font-family:Barlow;font-size:20px;line-height:1.02}.perspective-nav--2 .perspective-label>span,.perspective-nav--2 .perspective-arrow{display:none}.perspective-nav--2 .perspective-link[aria-current=step]{outline-color:var(--accent)}.perspective-nav--2 .perspective-link[aria-current=step] .perspective-thumb{filter:brightness(1) saturate(.9)}
/* 3: one cinematic image responds to the selected chapter. */
.story-nav.perspective-nav--3{display:flex;gap:0}.perspective-stage{position:relative;height:210px;overflow:hidden;background:#142438;margin-bottom:8px;isolation:isolate}.stage-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .5s,transform 1.2s cubic-bezier(.16,1,.3,1);z-index:-2}.stage-image--0{opacity:1}.perspective-nav--3:has(.perspective-link[aria-current=step]) .stage-image{opacity:0}.perspective-nav--3:has(.perspective-link--0[aria-current=step]) .stage-image--0,.perspective-nav--3:has(.perspective-link--1[aria-current=step]) .stage-image--1,.perspective-nav--3:has(.perspective-link--2[aria-current=step]) .stage-image--2,.perspective-nav--3:has(.perspective-link--3[aria-current=step]) .stage-image--3{opacity:1;transform:scale(1)}.stage-shade{position:absolute;inset:0;background:linear-gradient(0deg,#081523e0,transparent 85%);z-index:-1}.stage-caption{position:absolute;bottom:19px;left:21px;font-family:Barlow;font-size:26px}.perspective-nav--3 .perspective-link{display:flex;gap:17px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);min-height:66px}.perspective-nav--3 .perspective-link[aria-current=step]{background:#172d43;outline-color:transparent}.perspective-nav--3 .perspective-arrow{margin-left:auto}.perspective-nav--3 .perspective-label>span{display:none}
@media(prefers-reduced-motion:no-preference){body:not(.motion-off) .story-design--2 .field-route{animation:route-flow 9s linear infinite}@keyframes route-flow{to{stroke-dashoffset:-52}}}
@media(max-width:1000px){.story-design{gap:35px}.perspective-nav--1 .perspective-link{min-height:165px;padding:18px 12px}.perspective-label>span{font-size:10px}.story-nav.perspective-nav--2{gap:65px 20px}.perspective-nav--2 .perspective-link{padding:8px;margin:0 8px}.perspective-nav--2 .perspective-label strong{font-size:18px}}
@media(max-width:700px){.story-design{padding-top:55px}.story-design .story-guide{position:static}.story-design .story-guide h2{font-size:44px}.perspective-switch{margin:0 0 30px}.perspective-switch>span{flex-basis:100%;margin:0}.perspective-switch a{padding:12px 10px;font-size:11px}.story-nav.perspective-nav--1,.story-nav.perspective-nav--2{display:grid!important}.perspective-nav--1 .perspective-link{min-height:164px}.perspective-nav--1 .perspective-label strong{font-size:22px}.perspective-label>span{font-size:11px}.story-nav.perspective-nav--2{gap:68px 32px}.perspective-nav--2 .perspective-link{min-height:125px}.perspective-stage{height:210px}.story-design .story-scene{scroll-margin-top:110px}.story-design .motion-toggle{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.perspective-nav *, .perspective-nav *:before{animation:none!important;transition:none!important;transform:none!important}}body.motion-off .perspective-nav *,body.motion-off .perspective-nav *:before{animation:none!important;transition:none!important;transform:none!important}

.story-design .story-guide>.performance-index{font-size:15px;letter-spacing:.14em;color:var(--accent);margin:0 0 18px;text-transform:uppercase}

/* Compact overview: the chosen field and one detail share a single desktop view. */
.story-design--2{padding-top:42px;padding-bottom:42px;gap:65px;align-items:center;scroll-margin-top:115px;overflow-anchor:none}
.story-design--2 .story-guide{position:static;padding-bottom:0}
.story-design--2 .story-guide>.performance-index{margin-bottom:12px;font-size:13px}
.story-design--2 .story-guide h2{font-size:clamp(36px,3.1vw,48px);line-height:1.05;margin-bottom:16px}
.story-design--2 .story-guide>p:not(.performance-index){font-size:15px;line-height:1.55;margin-top:0;max-width:44ch}
.story-design--2 .perspective-nav--2{margin-top:20px;gap:36px 35px;padding:10px;background:transparent}
.story-design--2 .perspective-nav--2 .perspective-link{margin:0;padding:9px;min-height:104px;gap:8px;background:#132238;overflow:hidden;outline-offset:0;transition:background .35s,outline-color .35s,transform .4s cubic-bezier(.16,1,.3,1)}
.story-design--2 .perspective-nav--2 .perspective-thumb{height:57px;filter:brightness(.8) saturate(.7);transform:scale(1)}
.story-design--2 .perspective-nav--2 .perspective-link[aria-current=step]{outline:1px solid var(--accent);background:#20364a;transform:translateY(-3px)}
.story-design--2 .perspective-nav--2 .perspective-label strong{font-size:21px}
.story-design--2 .field-centre{font-size:0;gap:0}
.story-design--2 .field-centre svg{width:27px;height:27px}
.story-design--2 .field-route{stroke:var(--accent);stroke-dasharray:3 8;stroke-width:1.5}
.story-design--2 .perspective-controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.story-design--2 .perspective-controls .motion-toggle{margin-top:0;font-size:11px;padding:8px 12px}
.story-design--2.is-interactive .story-scene{display:none;min-height:0;padding:0;border:0;scroll-margin-top:115px}
.story-design--2.is-interactive .story-scene.is-active{display:block}
.story-design--2 .scene-photo{width:100%;height:clamp(135px,20vh,195px);object-fit:cover;display:block;margin-bottom:17px}
.story-design--2 .scene-step{font-size:12px;color:var(--accent)}
.story-design--2 .story-scene h3{font-size:clamp(33px,3vw,44px);margin:15px 0 18px;line-height:1.08}
.story-design--2 .story-scene>p{font-size:17px;line-height:1.6;margin-bottom:15px;max-width:43ch}
.story-design--2 .story-scene .scene-detail{font-size:14px;line-height:1.6;margin:0}
@media(prefers-reduced-motion:no-preference){body:not(.motion-off) .story-design--2:not(.overview-paused) .perspective-link[aria-current=step] .perspective-thumb{animation:perspective-drift 6.5s ease-out both}body:not(.motion-off) .story-design--2 .story-scene.is-active{animation:perspective-detail .65s cubic-bezier(.16,1,.3,1) both}body:not(.motion-off) .story-design--2:not(.overview-paused) .field-centre svg{animation:field-turn 13s linear infinite}@keyframes perspective-drift{to{transform:scale(1.1)}}@keyframes perspective-detail{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes field-turn{to{transform:rotate(360deg)}}}
.story-design--2.overview-paused .field-route,.story-design--2.overview-paused .perspective-thumb{animation-play-state:paused!important}
@media(max-width:1000px){.story-design--2{gap:30px}.story-design--2 .story-guide h2{font-size:36px}.story-design--2 .perspective-nav--2{gap:32px 22px}.story-design--2 .perspective-nav--2 .perspective-label strong{font-size:18px}.story-design--2 .story-scene h3{font-size:34px}}
@media(max-width:700px){.story-design--2{gap:30px;padding-top:35px;padding-bottom:45px;scroll-margin-top:85px}.story-design--2 .story-guide h2{font-size:37px}.story-design--2 .perspective-nav--2{gap:32px 18px}.story-design--2 .perspective-nav--2 .perspective-link{min-height:105px;padding:8px}.story-design--2 .perspective-nav--2 .perspective-label strong{font-size:19px}.story-design--2 .perspective-nav--2 .perspective-thumb{height:54px}.story-design--2 .scene-photo{height:160px}.story-design--2 .story-scene h3{font-size:34px}.story-design--2 .perspective-controls{gap:8px}.story-design--2 .perspective-controls .motion-toggle{font-size:10px;padding:8px 9px}}

.story-design--2.is-interactive .story-scenes{min-height:470px}
@media(max-width:700px){.story-design--2.is-interactive .story-scenes{min-height:420px}}