/* NO-JS fallback for the LIGHT PATH: the line shows fully drawn, made of static SVG segments (symbols in index.html,
   boxes placed here in the same percentages the layout uses). With JS, every segment is hidden and fp.js draws one
   continuous path from the live layout instead. Pools, rail nodes and the closing glow show in their lit state. */
.seg { display: none; }
html:not(.js) .seg { display: block; position: absolute; z-index: 0; overflow: visible; pointer-events: none; }
.sg { fill: none; stroke-linecap: butt; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sg1 { stroke: rgb(var(--h2)); stroke-opacity: .07; stroke-width: 84px; }
.sg2 { stroke: rgb(var(--h2)); stroke-opacity: .09; stroke-width: 48px; }
.sg3 { stroke: rgb(var(--h)); stroke-opacity: .12; stroke-width: 24px; }
.sg4 { stroke: rgb(var(--h)); stroke-opacity: .3; stroke-width: 9px; }
.sg5 { stroke: #FFFDF8; stroke-width: 1.9px; }

/* hero: leaves the full stop (same anchor fp.js uses: dot centre, .29em above the dot's box bottom), heads right and
   falls straight into area 1 at 91% of the wrap (the dot sits 6.494em into the wrap at every desktop width) */
html:not(.js) .hero { overflow-y: clip; }
html:not(.js) .lp-dot .seg-hero { z-index: -1; left: 50%; top: calc(100% - .29em); width: calc(min(1240px, 100vw - 48px) * .91 - 6.494em); height: 1000px; }

/* areas: the numeral sits at 9% (left areas) or 91% (right areas) of the wrap, centred in the area's height; each area
   carries an inbound half (top edge at 50% to the numeral) and an outbound half (numeral to the bottom edge at 50%) */
html:not(.js) .seg-a { top: 0; height: 50%; }
html:not(.js) .seg-b { top: 50%; height: 50%; }
html:not(.js) .s-r .seg-a, html:not(.js) .s-r .seg-b { left: 50%; width: 41%; }
html:not(.js) .s-l .seg-a, html:not(.js) .s-l .seg-b { left: 9%; width: 41%; }
html:not(.js) .stage:first-child .seg-a { left: 91%; width: 1px; }
html:not(.js) .stage:last-child .seg-b { left: 9%; width: 1px; }

/* how it works: the straight rail at 9%, through the section padding (140 top, 40 bottom) */
html:not(.js) .seg-rail { left: 9%; width: 1px; top: -140px; height: calc(100% + 180px); }
/* closing: from the rail to the centre, landing 36px above the heading (the close padding is 230px) */
html:not(.js) .seg-end { left: 9%; width: 41%; top: -230px; height: 194px; }

/* phone: one straight rail down the right side (23px in from the wrap edge), drawn with plain CSS */
@media (max-width: 760px) {
  html:not(.js) .seg { display: none; }
  html:not(.js) .stage-in::after, html:not(.js) .how-in::after, html:not(.js) .close-in::after {
    content: ""; position: absolute; z-index: 0; right: 20px; width: 6px; pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--h, 244, 221, 181), 0), rgba(var(--h, 244, 221, 181), .7) 30%, #FFFDF8 45% 55%, rgba(var(--h, 244, 221, 181), .7) 70%, rgba(var(--h, 244, 221, 181), 0));
    box-shadow: 0 0 14px 4px rgba(var(--h2, 246, 226, 190), .35), 0 0 34px 10px rgba(var(--h2, 246, 226, 190), .14);
  }
  html:not(.js) .stage-in::after { top: 0; bottom: 0; }
  html:not(.js) .stages .stage:first-child .stage-in::after { top: -84px; }
  html:not(.js) .how-in::after { top: -80px; bottom: -20px; }
  html:not(.js) .close-in::after { top: -140px; height: 194px; }
}