/* Satellite-to-sands lower journal — ported 2026-07-16 from an embedded
   <style id="ns-lower-css"> block in the original prototype's next-stops.html
   that the original theme scaffold missed entirely (it only extracted ONE of
   the page's two <style> blocks). Drives the .ns-lower "orbit to shore"
   voyage journal below the interactive map: space/satellite zone, sky-band
   with era chips + voyage cards, and the illustrated shore scene. Ported
   verbatim; all rules already scoped under .ns-lower, no relative asset
   paths to rewrite. See [[crewtrips-embedded-style-gap]] for the earlier,
   related miss on this same page (the map's own next-stops.css). */

.ns-lower{position:relative;padding:0 0 60px;font-family:'Nunito Sans',system-ui,sans-serif}
.ns-lower *{box-sizing:border-box}
.ns-lower a{color:#a8432a;text-decoration:none}
.ns-lower a:hover{color:#14304e}

/* full-bleed: the lower journal fills 100vw (no centered 1080 column, zero side gutter) */
.ns-lower .ns-wrap{width:100%;max-width:none;margin:0}

/* JOIN: warm parchment map above gives way to the upper sky (squared for edge-to-edge) */
.ns-lower .ns-join{height:60px;
  background:linear-gradient(180deg,#e4d3b0 0,#c9b48c 26%,#5b6f86 62%,#1a2f52 100%)}

.ns-lower .ns-sky{position:relative;overflow:hidden}

/* ---- ZONE 1: SPACE (fixed height, dark, stars + orbit + satellite) ---- */
.ns-lower .ns-space{position:relative;height:clamp(200px,26vw,262px);
  background:linear-gradient(180deg,#0e1e3a 0,#17294a 58%,#243f68 100%)}
.ns-lower .ns-space .sky-svg{position:absolute;inset:0;width:100%;height:100%}
.ns-lower #vl-sat{position:absolute;left:0;top:0;z-index:4;pointer-events:none;will-change:transform;opacity:0;transition:opacity .5s ease}

/* ---- ZONE 2: SKY (percentage gradient — robust to any height) ---- */
.ns-lower .ns-skyband{position:relative;
  background:linear-gradient(180deg,#243f68 0%,#3a6699 15%,#5c93c8 45%,#89bfe6 76%,#a9d3f0 100%)}
.ns-lower .ns-sun{position:absolute;top:40px;right:-80px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,214,.5),rgba(255,244,214,0) 62%);pointer-events:none;z-index:1}

/* readable content is capped & centered (~1120) while the zone backgrounds + shore stay full-bleed */
.ns-lower .ns-head{position:relative;z-index:3;text-align:center;max-width:1120px;margin:0 auto;padding:clamp(10px,2vw,20px) clamp(16px,4vw,40px) 4px}
.ns-lower .ns-kicker{font:700 11px/1 'Oswald',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#dbe9ff;margin-bottom:8px}
.ns-lower .ns-h2{font:700 clamp(40px,6.5vw,66px)/.9 'Caveat',cursive;color:#f7fbff;margin:0;transform:rotate(-1.2deg);text-shadow:0 2px 18px rgba(10,25,55,.55)}
.ns-lower .ns-sub{font:400 clamp(14px,1.8vw,16px)/1.6 'Nunito Sans',sans-serif;color:#eef5fd;margin:12px auto 0;max-width:560px;text-wrap:pretty;text-shadow:0 1px 8px rgba(10,25,55,.4)}

.ns-lower .ns-chips{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;max-width:1120px;margin:0 auto;padding:16px clamp(16px,4vw,40px) 8px}
.ns-lower .vl-chip{cursor:pointer;font:800 11px/1 'Oswald',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 15px;border:1.5px solid rgba(255,255,255,.7);border-radius:30px;
  background:rgba(255,255,255,.55);color:#1c3049;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(15,35,70,.14);
  transition:background .2s,color .2s}
.ns-lower .vl-chip[aria-pressed="true"]{background:#14304e;color:#f4faff;border-color:#0b1f38;box-shadow:2px 2px 0 #a8432a}
.ns-lower .vl-chip:focus-visible,.ns-lower .vl-card:focus-visible{outline:3px solid #a8432a;outline-offset:3px}

.ns-lower .ns-groups{position:relative;z-index:3;max-width:1120px;margin:0 auto;padding:8px clamp(16px,4vw,44px) 30px}
.ns-lower .ns-group{margin-bottom:30px}

/* chapter card — ONE legible treatment for all chapters (filter-safe, AA) */
.ns-lower .ns-chap{max-width:620px;margin:14px auto 18px;text-align:center;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:14px;
  padding:14px 22px;box-shadow:0 10px 26px -18px rgba(15,35,70,.5)}
.ns-lower .ns-chap h3{font:700 clamp(26px,3.8vw,34px)/1 'Caveat',cursive;color:#14304e;margin:0}
.ns-lower .ns-chap .sub{display:block;font:700 10px/1 'Oswald',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#a8432a;margin:6px 0 8px}
.ns-lower .ns-chap p{font:400 13.5px/1.6 'Nunito Sans',sans-serif;color:#38536f;margin:0;text-wrap:pretty}

.ns-lower .ns-rowgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px 16px}

.ns-lower .vl-card{position:relative;display:flex;gap:12px;align-items:flex-start;background:#fbf4e6;
  border:1px solid rgba(20,40,70,.12);border-radius:6px;box-shadow:0 14px 28px -16px rgba(15,35,70,.55);
  padding:13px 15px;transform:rotate(-.7deg);transition:transform .25s ease,box-shadow .25s ease}
.ns-lower .vl-card:hover{transform:translateY(-4px) rotate(0deg);box-shadow:0 22px 40px -18px rgba(15,35,70,.6)}
.ns-lower .vl-tape{position:absolute;top:-7px;left:22px;width:44px;height:14px;background:rgba(255,255,255,.55);transform:rotate(-4deg);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.ns-lower .vl-year{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:50px;height:50px;padding:0 7px;
  border:2px solid #a8432a;border-radius:50%;font:700 14px/1 'Oswald',sans-serif;color:#a8432a;transform:rotate(-3deg);background:rgba(255,255,255,.55)}
.ns-lower .vl-cb{flex:1;min-width:0}
.ns-lower .vl-short{display:block;font:700 15px/1.2 'Oswald',sans-serif;color:#22384f}
.ns-lower .vl-crew{display:block;font:600 15px/1.15 'Caveat',cursive;color:#6b5942;margin:2px 0 5px}
.ns-lower .vl-line{display:block;font:400 12px/1.5 'Nunito Sans',sans-serif;color:#5c4a37}

.ns-lower .ns-plategrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;margin-top:16px}
.ns-lower .vl-plate{position:relative;display:block;background:#fffdf7;border:1px solid rgba(20,40,70,.14);
  box-shadow:0 16px 34px -18px rgba(15,35,70,.6);padding:12px 12px 15px;transform:rotate(-1.1deg);
  transition:transform .25s ease,box-shadow .25s ease}
.ns-lower .vl-plate:hover{transform:translateY(-6px) rotate(0deg);box-shadow:0 26px 46px -18px rgba(15,35,70,.62)}
.ns-lower .vl-tape2{position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2.5deg);width:92px;height:24px;background:rgba(255,255,255,.6);box-shadow:0 2px 6px rgba(0,0,0,.14);z-index:2}
/* real taped print: photo fills the frame (build change vs the reference placeholder) */
.ns-lower .vl-photo{position:relative;height:174px;border:1px solid #cdd7df;overflow:hidden;background-color:#dce6ec}
.ns-lower .vl-photo img{width:100%;height:174px;object-fit:cover;display:block}
.ns-lower .vl-cap{display:block;font:600 16px/1.2 'Caveat',cursive;color:#4a6076;margin:9px 2px 0}
.ns-lower .vl-rl{display:flex;align-items:baseline;gap:9px;margin:7px 2px 0}
.ns-lower .vl-rl .yr{flex:0 0 auto;font:700 18px/1 'Oswald',sans-serif;color:#a8432a}
.ns-lower .vl-rl .rt{font:700 13px/1.25 'Oswald',sans-serif;color:#22384f}
.ns-lower .vl-open{display:inline-flex;align-items:center;gap:7px;margin:10px 2px 0;font:800 9px/1 'Nunito Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#a8432a;opacity:.85;transition:opacity .2s,gap .2s}
.ns-lower .vl-plate:hover .vl-open{opacity:1;gap:11px}

/* ---- ZONE 3: SHORE (illustrated scene: sailboat -> waves -> foam -> beach) ---- */
.ns-lower .ns-shore{position:relative;line-height:0;margin-top:-1px}
.ns-lower .ns-shore .ns-scene{display:block;width:100%;height:auto}
.ns-lower .ns-close{position:absolute;left:0;right:0;bottom:7%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 20px}
.ns-lower .ns-closetext{font:600 clamp(20px,3vw,27px)/1.2 'Caveat',cursive;color:#5c4a2e;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.4)}

/* motion */
@keyframes vl-ping{0%{transform:scale(.35);opacity:.7}70%{opacity:0}100%{transform:scale(3.4);opacity:0}}
@keyframes vl-beacon{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes vl-twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
.ns-lower .vl-ping{animation:vl-ping 5.5s ease-out infinite}
.ns-lower .vl-beacon{animation:vl-beacon 1.5s ease-in-out infinite}
.ns-lower .vl-star{animation:vl-twinkle 4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .ns-lower .vl-ping,.ns-lower .vl-beacon,.ns-lower .vl-star{animation:none}
  .ns-lower .vl-ping{opacity:0}
}