.journey-shell { position: relative; isolation: isolate; }
.amber-journey { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: clip; }
.journey-piece { position: absolute; left: 0; width: 100%; overflow: visible; }
.journey-bloom { fill: none; stroke: var(--forge-thread); stroke-width: 26; opacity: .18; filter: blur(5px); }
.journey-heat { fill: none; stroke: var(--forge-thread); stroke-width: 14; opacity: .24; filter: blur(2px); }
.journey-flow { fill: none; stroke: var(--forge-thread); stroke-width: clamp(3px, .37vw, 6px); }
/* Adjacent strokes meet without overlapping pools of light. */
.journey-piece path { stroke-linecap: butt; stroke-linejoin: round; }
.journey-source path { stroke-linecap: round; }
.journey-continuous path { stroke-linecap: round; }
.journey-ready .hero-emphasis-start::after { visibility: hidden; }

.journey-node {
  position: absolute;
  z-index: 4;
  top: var(--node-y);
  left: calc(var(--rail-x) + 1px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--forge-edge);
  border-radius: 50%;
  background: #231b14;
  color: #d9b38b;
  font: 600 34px/1 Oswald, sans-serif;
  font-variant-numeric: tabular-nums;
  transition: background .45s ease, box-shadow .45s ease, color .45s ease;
}
.journey-node.is-lit {
  background: var(--forge-thread);
  border-color: var(--forge-highlight);
  color: #241507;
  box-shadow: 0 0 0 5px #ec8c2820, 0 0 23px #ed8d3745, inset 0 1px #ffe0ad;
}
.recognition-story { --copy-indent: clamp(2.65rem, 5vw, 4rem); }
.recognition-story .recognition-step::after { display: none; }
.journey-ready .recognition-step::before,
.journey-ready .recognition-answer::before,
.journey-ready .recognition-answer::after,
.journey-ready .arc-stat-route { display: none; }

.recognition-story .recognition-answer {
  padding: 1.8rem 0 0 var(--copy-indent);
}
.recognition-story .recognition-answer h3 {
  display: inline-block;
  position: relative;
  z-index: 3;
  max-width: 100%;
  padding: .3em .48em .36em;
  margin-inline-start: -.48em;
  background: linear-gradient(110deg, #352315, #1b1713);
  border: 1px solid var(--forge-edge);
  border-radius: .22em;
  color: var(--amber);
  font-size: clamp(1.7rem, 4.75vw, 3.7rem);
  transition: border-color .5s, box-shadow .5s, color .5s;
}
.recognition-answer.is-lit h3 {
  color: var(--forge-highlight);
  border-color: var(--forge-thread);
  box-shadow: 0 5px 28px #b764191b, inset 0 1px #f6bd6221;
}
.recognition-story .recognition-answer p { margin-top: .8rem; }
.journey-ready .signup-form, .journey-ready .signup-venue { position: relative; z-index: 3; }

.camp-highlights li { display: flex; flex-direction: column; }
.highlight-rail { display:block; margin-top:auto; padding-top:.65rem; }
.highlight-rail i {
  display:block;
  width:100%;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--forge-highlight), var(--forge-thread));
  transform-origin:left;
}
.journey-ready .highlight-rail i { transform:scaleX(0); opacity:0; }
.journey-ready .is-traced .highlight-rail i {
  transform:scaleX(1);
  opacity:1;
  transition:transform .8s cubic-bezier(.16,.75,.25,1) var(--line-delay,0ms),
    opacity .3s var(--line-delay,0ms);
}
.journey-ready .footer-frame { border-color:transparent; }

@media (max-width: 760px) {
  .recognition-story { --copy-indent: 2.6rem; --rail-x: .35rem; }
  .journey-node { width: 56px; height: 56px; font-size: 30px; }
  .recognition-story .recognition-answer { padding-top: 1.25rem; }
  .recognition-story .recognition-answer h3 { font-size: clamp(1.35rem, 5.85vw, 2.2rem); }
  .recognition-story .recognition-answer p { font-size: clamp(1rem, 4.3vw, 1.3rem); }
  .journey-bloom { stroke-width: 20; }
  .journey-heat { stroke-width: 11; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-node, .recognition-story .recognition-answer h3 { transition: none; }
  .journey-ready .highlight-rail i { transition: none; transform: none; opacity: 1; }
  .journey-ready .is-traced .highlight-rail i { transition: none; }
}