/* journey.css: Case 01's front door as one journey (tools/journey.py). The site's own glass, ignition and sky on the landing plate: a chapter map that
   sticks under the nav, a timeline whose track fills as the reader goes, and a card for each step, a photograph or a figure on one side and the words and
   the pages it opens on the other. Everything is readable without the script; journey.js only lights the way. */

.jr-page{ --jr-rail:48px; --jr-line:rgba(229,231,235,.14); --jr-card:rgba(10,14,25,.78); --jr-hot:var(--ignition,#F4511E); --jr-cool:var(--sky,#57B4E6) }

/* the opening */
.jr-page .jr-hero .jr-in{
  max-width:640px; padding:clamp(20px,3.2vw,34px) clamp(20px,3.4vw,38px);
  background:linear-gradient(100deg,rgba(8,11,20,.86) 0%,rgba(8,11,20,.76) 56%,rgba(8,11,20,.45) 100%);
  border-left:3px solid var(--jr-hot);
}
.jr-page .jr-eyebrow{ font-size:max(11px,.72rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--amber,#F6A22B); margin:0 0 .9em }
.jr-page .jr-hero h1{ font-size:clamp(2rem,6.2vw,3.3rem); line-height:1.02; margin:0 0 .45em }
.jr-page .jr-lede{ color:var(--ink); font-size:clamp(1rem,1.6vw,1.12rem); line-height:1.55; margin:0 0 1.3em; max-width:58ch }
.jr-page .jr-starts{ display:flex; flex-wrap:wrap; gap:10px }
.jr-page .jr-btn{ display:inline-flex; align-items:center; min-height:46px; padding:10px 18px; border:2px solid var(--jr-hot); color:var(--ink); text-decoration:none;
  font-weight:800; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(8,11,20,.6); transition:background .2s,color .2s }
.jr-page .jr-btn:hover,.jr-page .jr-btn:focus-visible{ background:var(--jr-hot); color:#0B0F1A }
.jr-page .jr-btn:first-child{ background:var(--jr-hot); color:#0B0F1A }

/* the chapter map: sticks under the nav, says where the reader is, and draws how far they have come */
.jr-page .jr-map{ position:sticky; top:var(--navh,60px); z-index:30; margin:28px 0 0; background:rgba(5,7,13,.94); border:1px solid var(--jr-line);
  border-radius:var(--r-box,4px); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
.jr-page .jr-top{ display:flex; align-items:center; gap:10px; padding:7px 8px 0 14px }
.jr-page .jr-now{ flex:1 1 auto; min-width:0; margin:0; font-size:max(11px,.68rem); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--amber,#F6A22B);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.jr-page .jr-map ol{ list-style:none; margin:0; padding:0 8px; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none }
.jr-page .jr-map ol::-webkit-scrollbar{ display:none }
@media (min-width:1100px){ .jr-page .jr-map ol{ justify-content:space-between } }      /* all eight fit on a desktop: spread them; narrower, the row scrolls */
.jr-page .jr-map a{ display:block; white-space:nowrap; padding:9px 6px 10px; font-size:max(11px,.72rem); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none; border-bottom:3px solid transparent }
.jr-page .jr-map a:hover{ color:var(--ink) }
.jr-page .jr-map a.on{ color:var(--ink); border-bottom-color:var(--jr-hot) }
.jr-page .jr-prog{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--jr-hot); transform-origin:0 50%; transform:scaleX(0) }

/* the timeline */
.jr-page .jr-tl{ position:relative; padding:8px 0 40px }
.jr-page .jr-track{ position:absolute; top:0; bottom:0; left:calc(var(--jr-rail) / 2 - 1px); width:2px; background:var(--jr-line) }
.jr-page .jr-track i{ position:absolute; inset:0; background:linear-gradient(var(--jr-hot),var(--amber,#F6A22B)); transform-origin:50% 0; transform:scaleY(0) }
.jr-page .jr-rider{ position:absolute; top:0; left:calc(var(--jr-rail) / 2 - 16px); width:32px; height:32px; border-radius:50%; background:#05070D; border:2px solid var(--jr-hot);
  display:grid; place-items:center; z-index:2; will-change:transform; box-shadow:0 0 0 6px rgba(244,81,30,.16) }
.jr-page .jr-rider svg{ width:18px; height:18px; fill:none; stroke:var(--amber,#F6A22B); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

.jr-page .jr-ch{ position:relative; padding:56px 0 6px calc(var(--jr-rail) + 22px); scroll-margin-top:calc(var(--navh,60px) + 92px) }
.jr-page .jr-num{ margin:0; font-family:var(--display); font-size:clamp(3.4rem,8vw,6.2rem); line-height:.85; color:transparent; -webkit-text-stroke:1.5px var(--jr-hot) }
.jr-page .jr-ch h2{ margin:.12em 0 0; font-family:var(--display); font-size:clamp(1.7rem,4.4vw,2.9rem); line-height:1; text-transform:uppercase; text-wrap:balance }
.jr-page .jr-ch > p:last-child{ margin:.6em 0 0; color:var(--ink-2); max-width:62ch; line-height:1.5 }

.jr-page .jr-step{ position:relative; padding:22px 0 22px calc(var(--jr-rail) + 22px); scroll-margin-top:calc(var(--navh,60px) + 92px) }
.jr-page .jr-dot{ position:absolute; left:calc(var(--jr-rail) / 2 - 9px); top:44px; width:18px; height:18px; border-radius:50%; background:#05070D;
  border:2px solid rgba(229,231,235,.4); transition:background .4s,border-color .4s,box-shadow .4s }
.jr-page .jr-step.lit .jr-dot{ background:var(--jr-hot); border-color:var(--jr-hot); box-shadow:0 0 0 7px rgba(244,81,30,.18) }
.jr-page .jr-card{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); background:var(--jr-card); border:1px solid var(--jr-line);
  border-top:3px solid var(--jr-hot); border-radius:var(--r-box,4px); overflow:hidden; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px) }
.jr-page .jr-step.flip .jr-card{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) }
.jr-page .jr-step.flip .jr-ph{ order:2 }
.jr-page .jr-card.arrive{ animation:jr-arrive 1.8s ease-out }
@keyframes jr-arrive{ 0%{ box-shadow:0 0 0 0 rgba(244,81,30,0) } 22%{ box-shadow:0 0 0 3px rgba(246,162,43,.9),0 0 40px rgba(244,81,30,.4) } 100%{ box-shadow:0 0 0 0 rgba(244,81,30,0) } }

.jr-page .jr-ph{ position:relative; min-height:300px; overflow:hidden; background:#0B0F1A }
.jr-page .jr-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.2s cubic-bezier(.2,.7,.2,1) }
.jr-page .jr-step.lit .jr-ph img{ transform:scale(1) }
.jr-page .jr-who{ position:absolute; z-index:1; left:12px; top:12px; padding:5px 9px; font-size:max(11px,.66rem); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(5,7,13,.86); color:var(--ink); border-left:3px solid var(--jr-hot) }

/* a data side: one big figure, and the chart behind it */
.jr-page .jr-ph--data{ display:flex; background:linear-gradient(160deg,rgba(87,180,230,.08),rgba(5,7,13,.2) 60%),#0A0E19 }
.jr-page .jr-data{ width:100%; padding:52px clamp(18px,2.4vw,30px) 22px; display:grid; gap:14px }
.jr-page .jr-big{ margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px }
.jr-page .jr-big b{ font-family:var(--display); font-size:clamp(2.4rem,5.4vw,3.6rem); line-height:1; color:var(--ink) }
.jr-page .jr-big > span{ color:var(--ink-2); font-size:.95rem }
.jr-page .jr-note{ margin:0; font-size:max(11px,.7rem); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }

.jr-page .jr-bars{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.jr-page .jr-bars li{ display:grid; grid-template-columns:minmax(6.5em,9.5em) minmax(0,1fr) auto; align-items:center; gap:10px; font-size:.84rem; color:var(--ink-2) }
.jr-page .jr-bars .n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.jr-page .jr-bars .b{ height:10px; background:rgba(229,231,235,.08); border-radius:2px; overflow:hidden }
.jr-page .jr-bars .b i{ display:block; height:100%; background:rgba(229,231,235,.38) }
.jr-page .jr-bars .hot{ color:var(--ink) }
.jr-page .jr-bars .hot .b i{ background:var(--jr-hot) }
.jr-page .jr-bars .v{ font-variant-numeric:tabular-nums; color:var(--ink); font-weight:700; white-space:nowrap }

.jr-page .jr-stack .bar{ display:flex; height:16px; border-radius:2px; overflow:hidden; gap:2px }
.jr-page .jr-stack ul,.jr-page .jr-key{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; font-size:.84rem; color:var(--ink-2) }
.jr-page .jr-stack ul b{ color:var(--ink); font-variant-numeric:tabular-nums }
.jr-page .jr-stack .s-app,.jr-page .jr-key .sw.d.e,.jr-page .jr-cal i.d.e{ background:var(--jr-hot) }
.jr-page .jr-stack .s-ovh{ background:var(--amber,#F6A22B) }
.jr-page .jr-stack .s-oth{ background:var(--jr-cool) }
.jr-page .sw{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:7px; vertical-align:-1px }

.jr-page .jr-cal{ display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:3px; max-width:340px }
.jr-page .jr-cal i{ display:block; aspect-ratio:1; border-radius:2px; background:rgba(229,231,235,.08) }
.jr-page .jr-cal i.d,.jr-page .jr-key .sw.d{ background:var(--jr-cool) }
.jr-page .jr-cal i.r,.jr-page .jr-key .sw.r{ background:rgba(229,231,235,.28) }
.jr-page .jr-cal i.c,.jr-page .jr-key .sw.c{ background:var(--amber,#F6A22B) }
.jr-page .jr-cal i.o{ background:transparent; border:1px solid var(--jr-cool) }
.jr-page .jr-key{ grid-template-columns:repeat(2,minmax(0,1fr)) }

/* the words side */
.jr-page .jr-body{ padding:clamp(18px,2.4vw,30px); display:flex; flex-direction:column; gap:10px; min-width:0 }
.jr-page .jr-k{ margin:0; font-size:max(11px,.7rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--amber,#F6A22B) }
.jr-page .jr-body h3{ margin:0; font-family:var(--display); font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1.08; text-wrap:balance }
.jr-page .jr-p{ margin:0; color:var(--ink-2); line-height:1.6 }
.jr-page .jr-fig{ margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px }
.jr-page .jr-fig b{ font-family:var(--display); font-size:1.9rem; line-height:1 }
.jr-page .jr-fig > span{ color:var(--ink-2); font-size:.9rem }
.jr-page .jr-ul{ margin:0; padding-left:1.1em; color:var(--ink-2); display:grid; gap:4px; line-height:1.5 }
.jr-page .jr-ul li::marker{ color:var(--jr-hot) }
.jr-page .jr-tags{ list-style:none; margin:0; padding:0; display:grid; gap:8px; color:var(--ink-2); font-size:.9rem }
.jr-page .jr-body .hm-terms{ margin:2px 0 0 }
.jr-page .jr-links{ margin:auto 0 0; padding-top:6px; display:flex; flex-wrap:wrap; gap:8px 18px }
.jr-page .jr-links a{ color:var(--ink); text-decoration:none; font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; padding:6px 0;
  border-bottom:2px solid var(--jr-hot) }
.jr-page .jr-links a::after{ content:" \2192" }
.jr-page .jr-links a:hover,.jr-page .jr-links a:focus-visible{ color:var(--amber,#F6A22B) }
/* a step's one call to action is a solid button, the way the opening's first button is */
.jr-page .jr-links{ align-items:center }
.jr-page .jr-links a.jr-cta{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px; background:var(--jr-hot); color:#0B0F1A; border:0; border-radius:var(--r-box,4px) }
.jr-page .jr-links a.jr-cta:hover,.jr-page .jr-links a.jr-cta:focus-visible{ background:var(--amber,#F6A22B); color:#0B0F1A }

/* every page, at the end */
.jr-page .jr-every{ margin:30px 0 0; padding:clamp(18px,3vw,30px); background:var(--jr-card); border:1px solid var(--jr-line); border-radius:var(--r-box,4px); scroll-margin-top:calc(var(--navh,60px) + 92px) }
.jr-page .jr-every h2{ margin:0 0 .8em; font-family:var(--display); font-size:clamp(1.4rem,3.4vw,2rem); text-transform:uppercase }
.jr-page .jr-shelves{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 28px }
.jr-page .jr-shelf h3{ margin:0 0 6px; font-size:max(11px,.74rem); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--amber,#F6A22B) }
.jr-page .jr-shelf ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.jr-page .jr-shelf a{ display:grid; gap:1px; padding:8px 0; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--jr-line) }
.jr-page .jr-shelf a b{ font-weight:800 }
.jr-page .jr-shelf a span{ color:var(--ink-3); font-size:.86rem; line-height:1.4 }
.jr-page .jr-shelf a:hover b,.jr-page .jr-shelf a:focus-visible b{ color:var(--amber,#F6A22B) }

/* the map's tools: Search, Back and Next (and Clear while a search is on); on a phone the dock holds them, at the thumb */
.jr-page .jr-tools{ flex:none; display:flex; gap:6px }
.jr-page .jr-tools[hidden],.jr-page .jr-tool[hidden],.jr-page .jr-ask[hidden],.jr-page .jr-panel[hidden],.jr-page .jr-dock[hidden],.jr-page .jr-idx li[hidden]{ display:none }
.jr-page .jr-tool{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:1px solid var(--jr-hot); border-radius:var(--r-box,4px);
  background:transparent; color:var(--ink); font:inherit; font-size:max(11px,.68rem); font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background .18s,color .18s,border-color .18s }
.jr-page .jr-tool span{ font-size:1rem; line-height:1 }
.jr-page .jr-tool b{ font-weight:inherit }
.jr-page .jr-tool:hover:not(:disabled),.jr-page .jr-tool:focus-visible{ background:var(--jr-hot); color:#0B0F1A }
.jr-page .jr-tool:disabled{ opacity:.35; cursor:default }
.jr-page .jr-tool.on{ background:rgba(244,81,30,.22) }
.jr-page .jr-clear{ border-color:var(--amber,#F6A22B); color:var(--amber,#F6A22B) }
.jr-page .jr-mag{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round }
.jr-page .jr-map a.dim{ opacity:.32 }
.jr-page .jr-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* the search in the opening: it looks like the box it opens */
.jr-page .jr-ask{ display:flex; align-items:center; gap:10px; width:100%; max-width:460px; height:48px; margin:14px 0 0; padding:0 14px; cursor:text; text-align:left;
  background:rgba(255,255,255,.06); border:1px solid rgba(229,231,235,.24); border-radius:var(--r-box,4px); color:var(--ink-2); font:inherit; font-size:.95rem;
  transition:border-color .18s,background .18s }
.jr-page .jr-ask:hover,.jr-page .jr-ask:focus-visible{ border-color:var(--jr-hot); background:rgba(255,255,255,.09) }
.jr-page .jr-ask .jr-mag{ width:18px; height:18px; color:var(--amber,#F6A22B) }
.jr-page .jr-ask kbd{ margin-left:auto; padding:1px 7px; border:1px solid var(--jr-line); border-radius:4px; font:inherit; font-size:.75rem; color:var(--ink-3) }
@media (hover:none){ .jr-page .jr-ask kbd{ display:none } }

/* the search and the index: a panel under the bars on a desktop, a sheet from the bottom on a phone */
.jr-page .jr-panel{ position:fixed; z-index:60; top:calc(var(--navh,60px) + 10px); right:max(16px,calc((100vw - var(--maxw,1120px)) / 2)); width:min(440px,calc(100vw - 32px));
  max-height:calc(100vh - var(--navh,60px) - 26px); display:flex; flex-direction:column; gap:10px; padding:14px 14px 10px;
  background:rgba(8,11,20,.97); border:1px solid var(--jr-line); border-top:3px solid var(--jr-hot); border-radius:var(--r-box,4px);
  box-shadow:0 26px 70px rgba(0,0,0,.62); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); animation:jr-drop .22s cubic-bezier(.2,.8,.2,1) }
@keyframes jr-drop{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
.jr-page .jr-panel-top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.jr-page .jr-panel .jr-panel-h{ margin:0; font-size:max(11px,.72rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--amber,#F6A22B) }
.jr-page .jr-x{ width:36px; height:36px; border:1px solid var(--jr-line); border-radius:50%; background:transparent; color:var(--ink); font-size:1.2rem; line-height:1; cursor:pointer }
.jr-page .jr-x:hover,.jr-page .jr-x:focus-visible{ border-color:var(--jr-hot); color:var(--amber,#F6A22B) }
.jr-page .jr-find{ position:relative; margin:0 }
.jr-page .jr-find .jr-mag{ position:absolute; left:13px; top:50%; width:17px; height:17px; transform:translateY(-50%); color:var(--ink-3); pointer-events:none }
.jr-page .jr-find input{ width:100%; height:48px; padding:0 14px 0 40px; background:rgba(255,255,255,.06); border:1px solid var(--jr-line); border-radius:var(--r-box,4px);
  color:var(--ink); font:inherit; font-size:16px; outline:none; transition:border-color .18s }
.jr-page .jr-find input:focus{ border-color:var(--jr-hot) }
.jr-page .jr-panel .jr-picks{ margin:0; display:flex; flex-wrap:wrap; gap:6px }
.jr-page .jr-picks button{ padding:6px 11px; border:1px solid var(--jr-line); border-radius:999px; background:transparent; color:var(--ink-2); font:inherit; font-size:.8rem; cursor:pointer;
  transition:border-color .18s,color .18s }
.jr-page .jr-picks button:hover,.jr-page .jr-picks button:focus-visible{ border-color:var(--jr-hot); color:var(--ink) }
.jr-page .jr-panel .jr-count{ margin:0; min-height:1.2em; font-size:.82rem; font-weight:700; color:var(--amber,#F6A22B) }
.jr-page .jr-idx{ list-style:none; margin:0 -6px; padding:0 6px 4px; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin }
.jr-page .jr-idx ol{ list-style:none; margin:0 0 8px; padding:0 }
.jr-page .jr-idx a{ display:flex; align-items:baseline; gap:10px; padding:7px 8px; color:var(--ink-2); text-decoration:none; border:0; border-left:2px solid transparent;
  border-radius:2px; font-size:.9rem; line-height:1.35 }
.jr-page .jr-idx a:hover,.jr-page .jr-idx a:focus-visible{ background:rgba(255,255,255,.05); color:var(--ink) }
.jr-page .jr-idx a[aria-current]{ border-left-color:var(--jr-hot); background:rgba(244,81,30,.12); color:var(--ink) }
.jr-page .jr-idx a span{ flex:none; min-width:1.6em; font-variant-numeric:tabular-nums; font-size:.78rem; font-weight:800; color:var(--ink-3) }
.jr-page .jr-idx .ix-ch > a{ margin-top:4px; color:var(--ink); font-size:max(11px,.72rem); font-weight:800; letter-spacing:.12em; text-transform:uppercase }
.jr-page .jr-idx .ix-ch > a b{ color:var(--jr-hot); font-family:var(--display) }
.jr-page .jr-idx .ix-end > a{ color:var(--amber,#F6A22B); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:max(11px,.74rem) }
::highlight(jr-hit){ background-color:rgba(246,162,43,.92); color:#0B0F1A }

/* the dock: Back, Next (it says where Next goes) and Search, where a thumb rests; shown past the opening, on phones and tablets */
.jr-page .jr-dock{ display:none }

/* a step's picture or figure is a tile: it opens the step's first page, and says which */
.jr-page .jr-card > a.jr-ph{ display:block; color:inherit; text-decoration:none; border:0 }
.jr-page .jr-card > a.jr-ph.jr-ph--data{ display:flex; flex-direction:column; justify-content:center }
.jr-page .jr-ph--data .jr-go{ position:static; align-self:flex-end; margin:-6px clamp(18px,2.4vw,30px) 18px 0 }      /* a figure's chip sits under its note, not on it */
.jr-page .jr-card > a.jr-ph:focus-visible{ outline:2px solid var(--amber,#F6A22B); outline-offset:-4px }
.jr-page .jr-go{ position:absolute; z-index:1; right:12px; bottom:12px; padding:6px 10px; background:rgba(5,7,13,.88); color:var(--ink); font-size:max(11px,.66rem);
  font-weight:800; letter-spacing:.12em; text-transform:uppercase; border-bottom:2px solid var(--jr-hot); transition:background .18s,color .18s }
.jr-page .jr-go::after{ content:" \2192" }
.jr-page .jr-go--left{ right:auto; left:12px }      /* where a photo's subject sits bottom right (a label to read) */
.jr-page .jr-card > a.jr-ph:hover .jr-go,.jr-page .jr-card > a.jr-ph:focus-visible .jr-go{ background:var(--jr-hot); color:#0B0F1A }
.jr-page .jr-step.lit .jr-card > a.jr-ph:hover img{ transform:scale(1.035) }
.jr-page .jr-miss{ display:none !important }

@media(max-width:820px){
  .jr-page .jr-tools > .jr-tool:not(.jr-clear){ display:none }
  .jr-page .jr-panel{ top:auto; left:0; right:0; bottom:0; width:auto; max-height:min(82vh,82dvh); padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-radius:16px 16px 0 0; border-left:0; border-right:0; animation:jr-rise .26s cubic-bezier(.2,.8,.2,1) }
  @keyframes jr-rise{ from{ transform:translateY(24px); opacity:0 } to{ transform:none; opacity:1 } }
  .jr-page .jr-dock{ position:fixed; z-index:45; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:6px;
    width:min(560px,calc(100vw - 24px)); padding:6px; background:rgba(8,11,20,.94); border:1px solid var(--jr-line); border-radius:999px;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 14px 40px rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transform:translate(-50%,24px); transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s,visibility 0s .3s }
  .jr-page .jr-dock.show{ opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s }
  .jr-page .jr-dock[hidden]{ display:none }
  .jr-page .jr-dbtn{ flex:none; width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--jr-line); border-radius:50%; background:transparent;
    color:var(--ink); font:inherit; font-size:1.15rem; font-weight:800; cursor:pointer }
  .jr-page .jr-dbtn .jr-mag{ width:19px; height:19px }
  .jr-page .jr-dbtn:disabled{ opacity:.35 }
  .jr-page .jr-dbtn.on{ border-color:var(--jr-hot); color:var(--amber,#F6A22B) }
  .jr-page .jr-dnext{ flex:1 1 auto; min-width:0; height:48px; display:flex; align-items:center; gap:8px; padding:0 16px; border:0; border-radius:999px; background:var(--jr-hot);
    color:#0B0F1A; font:inherit; text-align:left; cursor:pointer }
  .jr-page .jr-dnext small{ flex:none; font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.78 }
  .jr-page .jr-dnext span{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.88rem; font-weight:800 }
  .jr-page .jr-dnext i{ flex:none; font-style:normal; font-size:1.1rem; font-weight:800 }
  .jr-page .jr-dbtn:active,.jr-page .jr-dnext:active{ transform:scale(.96) }
  body.jr-page{ padding-bottom:calc(76px + env(safe-area-inset-bottom)) }      /* the dock never covers the last lines of the page */
  .jr-page .jr-card,.jr-page .jr-step.flip .jr-card{ grid-template-columns:minmax(0,1fr) }
  .jr-page .jr-step.flip .jr-ph{ order:0 }
  .jr-page .jr-ph{ min-height:200px }
  .jr-page .jr-ph--data{ min-height:0 }
  .jr-page .jr-data{ padding:46px 16px 18px }
  .jr-page .jr-shelves{ grid-template-columns:minmax(0,1fr) }
}
@media(max-width:560px){
  .jr-page{ --jr-rail:22px }
  .jr-page .jr-links a.jr-cta{ flex:1 1 100%; justify-content:center; min-height:48px }      /* the one call to action spans the card, where a thumb lands */
  .jr-page .jr-ch{ padding-left:calc(var(--jr-rail) + 12px) }
  .jr-page .jr-step{ padding-left:calc(var(--jr-rail) + 12px) }
  .jr-page .jr-rider{ width:24px; height:24px; left:calc(var(--jr-rail) / 2 - 12px) }
  .jr-page .jr-rider svg{ width:14px; height:14px }
  .jr-page .jr-dot{ width:14px; height:14px; left:calc(var(--jr-rail) / 2 - 7px) }
  .jr-page .jr-bars li{ grid-template-columns:minmax(5.5em,8.6em) minmax(0,1fr) auto; gap:8px }      /* 8.6em holds "Chevrolet Express" */
}
@media(prefers-reduced-motion:reduce){
  .jr-page .jr-ph img,.jr-page .jr-dot,.jr-page .jr-dock{ transition:none }
  .jr-page .jr-card.arrive,.jr-page .jr-panel{ animation:none }
}

/* the timeline reads on a dark band, the plate behind it dimmed: a shadow paints the band past the column without widening the page */
.jr-page .jr-tl{ isolation:isolate }
.jr-page .jr-tl::before{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background:rgba(5,7,13,.9);
  box-shadow:0 0 0 100vmax rgba(5,7,13,.9); clip-path:inset(-60px -100vmax 0 -100vmax) }
.jr-page .jr-starts .jr-btn{ color:var(--ink); border-bottom:2px solid var(--jr-hot) }
.jr-page .jr-starts .jr-btn:first-child,.jr-page .jr-starts .jr-btn:hover{ color:#0B0F1A }
.jr-page .jr-tl .jr-num{ color:transparent }
.jr-page .jr-links a,.jr-page .jr-map a,.jr-page .jr-shelf a{ border-bottom-color:var(--jr-hot) }
.jr-page .jr-map a,.jr-page .jr-shelf a{ border-bottom-color:transparent }
.jr-page .jr-map a.on{ border-bottom-color:var(--jr-hot) }
.jr-page .jr-shelf a{ border-bottom:1px solid var(--jr-line) }
/* the site's own rule for a section's paragraphs (.gx section:not(.g) > p) is stronger than a class: these say the journey's colours over it */
.jr-page .jr-tl .jr-ch > p.jr-num{ color:transparent }
.jr-page .jr-tl .jr-ch > p:last-child{ color:var(--ink-2) }
.jr-page section.jr-every > p.jr-eyebrow{ color:var(--amber,#F6A22B) }