/* Editorial navigation — Beautifully simple. Surprisingly powerful.
   Interaction and media behavior stay in the existing story controller. */
.journey-copy{
  gap:clamp(20px,2.1vw,30px);
}

.story-chapter{
  display:grid;
  gap:0;
}

.story-chapter-label{
  width:max-content;
  min-height:30px;
  margin:0 0 5px;
  padding:4px 0;
  gap:9px;
  color:#8d949d;
  font-size:.76rem;
  font-weight:650;
  line-height:1.2;
  letter-spacing:.12em;
  cursor:pointer;
}

.story-chapter-label:hover{
  color:#5f6771;
}

.story-chapter.is-active .story-chapter-label,
.story-chapter:has(.story-step.is-active) .story-chapter-label,
.story-chapter-label[aria-current=step]{
  color:var(--blue);
}

.story-step{
  position:relative;
  display:block;
  min-height:0;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  transition:none;
}

.story-step + .story-step{
  border-top:1px solid rgba(117,126,137,.16);
}

.story-step-trigger,
.story-step.is-active .story-step-trigger{
  position:relative;
  display:block;
  width:100%;
  min-height:42px;
  padding:10px 6px 10px 18px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#505760;
  text-align:left;
  font-size:clamp(1rem,1.13vw,1.08rem);
  font-weight:560;
  line-height:1.35;
  cursor:pointer;
  transition:color 220ms ease,font-weight 220ms ease;
}

.story-step-trigger:hover,
.story-step.is-active .story-step-trigger:hover{
  background:transparent;
  color:var(--ink);
}

.story-step-trigger:focus-visible,
.story-chapter-label:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:4px;
}

/* Keep the existing expansion affordance for screen readers while removing
   its FAQ-like visual treatment. */
.story-step-trigger > span:last-child{
  display:none;
}

.story-step.is-active{
  overflow:visible;
  border-radius:0;
  background:transparent;
}

.story-step.is-active .story-step-trigger{
  color:var(--ink);
  font-weight:680;
}

.story-step.is-active .story-step-trigger::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:2px;
  background:var(--blue);
}

.story-step-panel,
.story-step.is-active .story-step-panel{
  margin:0;
  padding:0 6px 12px 18px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#6e7680;
}

.story-step.is-active .story-step-panel{
  animation:story-editorial-reveal 260ms cubic-bezier(.22,.65,.3,1) both;
}

.story-step .story-step-panel > p,
.story-step.is-active .story-step-panel > p{
  max-width:none;
  margin:0;
  color:#747c86;
  font-size:.94rem;
  font-weight:480;
  line-height:1.45;
}

.story-substeps,
.story-step.is-active .story-substeps{
  display:flex;
  flex-wrap:wrap;
  gap:5px 18px;
  max-width:none;
  margin:10px 0 0;
  padding:0;
  color:#9299a2;
  font-size:.83rem;
  line-height:1.35;
}

.story-substeps button,
.story-step.is-active .story-substeps button{
  position:relative;
  min-height:25px;
  padding:2px 0 4px;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:480;
  text-align:left;
  cursor:pointer;
  transition:color 200ms ease,box-shadow 200ms ease,font-weight 200ms ease;
}

.story-substeps button:hover,
.story-step.is-active .story-substeps button:hover{
  color:#4d545d;
}

.story-substeps button[aria-current=step],
.story-step.is-active .story-substeps button[aria-current=step]{
  color:var(--ink);
  font-weight:650;
  box-shadow:inset 0 -2px var(--blue);
}

@keyframes story-editorial-reveal{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:1100px) and (min-width:801px){
  .journey-copy{gap:20px}
  .story-step-trigger,
  .story-step.is-active .story-step-trigger{min-height:40px;padding:9px 5px 9px 16px;font-size:.98rem}
  .story-step-panel,
  .story-step.is-active .story-step-panel{padding:0 5px 11px 16px}
  .story-substeps,
  .story-step.is-active .story-substeps{gap:4px 13px;font-size:.79rem}
}

@media(max-width:800px){
  .journey-copy{display:grid;gap:28px}
  .story-chapter{gap:0}
  .story-chapter-label{min-height:38px;margin-bottom:4px;padding:8px 0;font-size:.78rem}
  .story-step-trigger,
  .story-step.is-active .story-step-trigger{min-height:48px;padding:12px 4px 12px 18px;font-size:1.08rem}
  .story-step-panel,
  .story-step.is-active .story-step-panel{padding:0 4px 15px 18px}
  .story-step .story-step-panel > p,
  .story-step.is-active .story-step-panel > p{font-size:.98rem}
  .story-substeps,
  .story-step.is-active .story-substeps{gap:7px 17px;font-size:.9rem}
  .story-substeps button,
  .story-step.is-active .story-substeps button{min-height:34px;padding-block:6px}
  .story-step-panel .journey-visual{width:calc(100% - 10px);margin-left:-2px}
}

@media(prefers-reduced-motion:reduce){
  .story-step.is-active .story-step-panel{animation:none}
}