/* ==========================================================================
   THE INDEX (js/journey-index.js) — a slim rail at the right edge: the chapters as markers, the current one
   named, the way through filling in; a quiet shortcut at its foot. Inside the World Explorer a journey's own
   rail takes its place (.jx--journey: its places as stops, a little more minimal). On phones: a thread at the
   edge, and a small navigator behind it. Always second to the work: it steps back over the films.
   ========================================================================== */

.jx {
  --jx-warm: #d9a04b;          /* the one accent, used sparingly: a warm, editorial amber */
  --jx-film: 1;                /* (a chapter's opening film on screen: set by js/journey-index.js) */
  --jx-row: 34px;              /* (a marker's row) */
  position: fixed;
  top: 50%;
  right: clamp(14px, 1.7vw, 28px);
  z-index: 45;                 /* over the page and its maps, under the header (50) and the video player (100) */
  translate: 0 -50%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), visibility 0s linear 0.6s;
}

.jx.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 1s var(--ease-out) 0.1s, transform 1s var(--ease-out) 0.1s, visibility 0s;
}

/* (over a film that has the screen — a region's, or a chapter's opening one — it all but goes) */
.jx__in { opacity: calc(var(--jx-film) * var(--rj-map, 1)); }

.jx__toggle { display: none; }

.jx__panel { position: relative; display: flex; flex-direction: column; align-items: flex-end; }

/* ---------- The chapters: markers on a thread ---------- */

.jx__track { position: relative; }
.jx__list { list-style: none; display: flex; flex-direction: column; }

.jx__node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--jx-row);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* the marker (its hit area: the whole row's height) */
.jx__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: var(--jx-row); }
.jx__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid rgba(235, 233, 228, 0.42);
  border-radius: 50%;
  background: var(--bg);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.jx__item.is-past .jx__dot::before { background: rgba(235, 233, 228, 0.5); border-color: rgba(235, 233, 228, 0.5); }
.jx__item.is-current .jx__dot::before { background: var(--fg); border-color: var(--fg); box-shadow: 0 0 0 4px rgba(235, 233, 228, 0.13); transform: scale(1.2); }

/* its name: the current chapter's always (with where in it the visitor is); the others on hover */
.jx__label {
  position: absolute;
  top: 50%;
  right: 30px;
  translate: 0 -50%;
  display: grid;
  gap: 4px;
  justify-items: end;
  white-space: nowrap;
  text-align: right;
  text-shadow: 0 0 14px rgba(28, 29, 31, 0.95), 0 0 3px rgba(28, 29, 31, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) ease;
}
.jx__name { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.22em; line-height: 1.2; text-transform: uppercase; color: var(--fg-muted); transition: color var(--dur-fast) ease; }
.jx__sub { display: none; font-size: 0.75rem; font-weight: 300; letter-spacing: 0.01em; line-height: 1.25; color: var(--fg-muted); }
.jx__sub:empty { display: none !important; }

.jx__item.is-current .jx__label { opacity: 1; }
.jx__item.is-current .jx__name { font-size: 0.6875rem; color: var(--fg); }
.jx__item.is-current .jx__sub { display: block; }

@media (hover: hover) {
  .jx__panel:hover .jx__label { opacity: 0.5; pointer-events: auto; }
  .jx__panel:hover .jx__item.is-current .jx__label { opacity: 0.85; }
  .jx__node:hover .jx__label, .jx__panel:hover .jx__node:hover .jx__label { opacity: 1; }
  .jx__node:hover .jx__name { color: var(--fg); }
  .jx__node:hover .jx__dot::before { border-color: var(--fg); }
}
.jx__node:focus-visible { outline: none; }
.jx__node:focus-visible .jx__label { opacity: 1; }
.jx__node:focus-visible .jx__dot::before { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--fg); }

/* the thread, and the way through it so far */
.jx__rail {
  position: absolute;
  top: calc(var(--jx-row) / 2);
  bottom: calc(var(--jx-row) / 2);
  right: 10.5px;
  width: 1px;
  background: rgba(235, 233, 228, 0.16);
  pointer-events: none;
}
.jx__fill {
  position: absolute;
  inset: 0;
  background: rgba(235, 233, 228, 0.72);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.5s var(--ease-out);
}

/* ---------- The shortcut to the full portfolio: optional, and quiet — off-white words, the one warm touch its arrow,
   which sits under the thread (scrolling stays the way through; this is only another way in) ---------- */

.jx__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.2;
  white-space: nowrap;
  color: rgba(235, 233, 228, 0.58);
  text-shadow: 0 0 14px rgba(28, 29, 31, 0.95), 0 0 3px rgba(28, 29, 31, 0.8);
  cursor: pointer;
  transition: color var(--dur-fast) ease, opacity 0.5s var(--ease-out), visibility 0s;
}
.jx__cta-arrow {
  display: inline-block;
  width: 22px;                 /* (the markers' column: the arrow under the thread) */
  text-align: center;
  font-size: 0.8125rem;
  color: var(--jx-warm);
  opacity: 0.85;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) ease;
}
@media (hover: hover) {
  .jx__cta:hover { color: var(--fg); }
  .jx__cta:hover .jx__cta-arrow { opacity: 1; transform: translateX(4px); }
}
.jx__cta:focus-visible { outline: 1px solid rgba(235, 233, 228, 0.5); outline-offset: 4px; color: var(--fg); }

/* ---------- A journey's own rail: its places as stops — every name there, quietly (it's the itinerary), the one
   it's at lit; above it, the region and the way chosen in it ---------- */

.jx--journey { --jx-row: clamp(22px, calc((100svh - 330px) / var(--jx-n, 8)), 30px); }
.jx--journey .jx__label { opacity: 0.4; }
.jx--journey .jx__item.is-current .jx__label { opacity: 1; }
/* (at a choice the map names the ways on; here they're marks, named when pointed at — never a menu) */
.jx--journey .jx__item.is-option .jx__label { opacity: 0; }
.jx--journey .jx__name { font-size: 0.5625rem; }
.jx--journey .jx__item.is-current .jx__name { font-size: 0.625rem; }
@media (hover: hover) {
  .jx--journey .jx__panel:hover .jx__label, .jx--journey .jx__panel:hover .jx__item.is-option .jx__label { opacity: 0.7; }
  .jx--journey .jx__panel:hover .jx__item.is-current .jx__label, .jx--journey .jx__node:hover .jx__label { opacity: 1; }
}
/* (every name shows: a soft shade of the page's tone behind them, fading out all round, keeps them clear of the map's own) */
.jx--journey .jx__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34px -30px -34px -110px;
  background: linear-gradient(to left, rgba(28, 29, 31, 0.8), rgba(28, 29, 31, 0.6) 55%, rgba(28, 29, 31, 0));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  pointer-events: none;
}
/* (the first stop in a branch is the choice it came from: the way back) */
.jx__item.is-up .jx__name::before { content: "↑ "; }
.jx__head {
  display: grid;
  gap: 4px;
  justify-items: end;
  margin-bottom: 10px;
  padding-right: 30px;
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(28, 29, 31, 0.95), 0 0 3px rgba(28, 29, 31, 0.8);
}
.jx__head-title { display: inline-flex; align-items: center; gap: 8px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.24em; line-height: 1.2; text-transform: uppercase; color: var(--fg); }
.jx__head-path { font-size: 0.6875rem; font-weight: 300; line-height: 1.25; color: var(--fg-muted); }
/* the identity: its flag, small, with a hairline edge (a new one comes in softly) */
.jx__flag { display: block; height: 11px; width: auto; box-shadow: 0 0 0 1px rgba(235, 233, 228, 0.16); }
.jx__flag[hidden] { display: none; }
.jx__flag.is-new { animation: jx-flag 0.9s var(--ease-out) both; }
@keyframes jx-flag { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.jx__head-path:empty { display: none; }

/* ---------- Going to a chapter: a short dip to the page's tone ---------- */

.jx-cover {
  position: fixed;
  inset: 0;
  z-index: 44;                 /* over the page, under the index and the header */
  display: grid;
  place-items: center;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-out), visibility 0s linear 0.55s;
}
.jx-cover.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.22s ease, visibility 0s; }
.jx-cover__note { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg-dim); opacity: 0; transition: opacity 0.6s ease; }
.jx-cover.is-slow .jx-cover__note { opacity: 1; }

/* ---------- Phones: the portfolio's index as a small pill at the foot — the chapter, where it is among them, the way
   through as a line — tapped, the chapters (and the shortcut) in a small card above it. Inside a journey, the journey's
   own bar at the foot opens its stops (js/journey-index.js), so no rail sits over the work. ---------- */

.jx__toggle-count, .jx__toggle-bar { display: none; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .jx {
    top: auto;
    right: var(--gutter);
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    translate: none;
    transform: translateY(10px);
  }
  .jx.is-on { transform: none; }
  .jx__in { position: static; }

  /* the pill */
  .jx__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px 2px;
    border: 1px solid rgba(235, 233, 228, 0.22);
    background: rgba(28, 29, 31, 0.86);
    -webkit-backdrop-filter: none;
    font: inherit;
    color: var(--fg);
    cursor: pointer;
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .jx__toggle:active { transform: scale(0.97); background: rgba(40, 41, 44, 0.95); }
  .jx.is-open .jx__toggle { border-color: rgba(235, 233, 228, 0.55); }
  .jx__toggle-name { display: inline-block; max-width: 16em; overflow: hidden; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; transition: max-width 0.45s var(--ease-out), opacity 0.3s ease, margin 0.45s var(--ease-out); }
  /* (still: the pill draws in to its count at the corner — the titles and captions beside it are the work's) */
  .jx:not(.jx--journey) .jx__toggle { transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform 0.12s ease, padding 0.45s var(--ease-out); }
  .jx:not(.jx--journey):not(.is-moving):not(.is-open) .jx__toggle { padding-inline: 12px; }
  .jx:not(.jx--journey):not(.is-moving):not(.is-open) .jx__toggle-name { max-width: 0; opacity: 0; margin-right: -10px; }
  .jx:not(.jx--journey):not(.is-moving):not(.is-open) .jx__toggle-bar { left: 12px; right: 12px; }
  .jx__toggle-count { display: inline; font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .jx__toggle-count:empty { display: none; }
  .jx__toggle-bar { display: block; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 1px; background: rgba(235, 233, 228, 0.16); }
  .jx__toggle-bar > span { position: absolute; inset: 0; background: rgba(235, 233, 228, 0.75); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.5s var(--ease-out); }
  /* (a small caret: it opens) */
  .jx__toggle::after { content: ""; width: 5px; height: 5px; margin-left: 2px; border-left: 1px solid currentColor; border-top: 1px solid currentColor; transform: translateY(2px) rotate(45deg); opacity: 0.7; transition: transform 0.3s var(--ease-out); }
  .jx.is-open .jx__toggle::after { transform: translateY(-1px) rotate(225deg); }

  /* closed: only the pill */
  .jx:not(.is-open) .jx__panel { display: none; }
  .jx__label, .jx__head { display: none; }
  .jx--journey .jx__panel::before { display: none; }

  /* open: the chapters (and the shortcut) in a small card above the pill */
  .jx.is-open .jx__panel {
    position: fixed;
    right: var(--gutter);
    bottom: calc(14px + 44px + 10px + env(safe-area-inset-bottom, 0px));
    width: min(290px, calc(100vw - 2 * var(--gutter)));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px 12px 18px;
    border: 1px solid var(--line-strong);
    background: var(--bg);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
    animation: jx-card 0.28s var(--ease-out) both;
  }
  @keyframes jx-card { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .jx.is-open { --jx-row-open: 42px; }
  .jx--journey.is-open { --jx-row-open: clamp(34px, calc((100svh - 360px) / var(--jx-n, 8)), 42px); }
  .jx.is-open .jx__track { position: relative; width: 100%; }
  .jx.is-open .jx__node { width: 100%; height: var(--jx-row-open); justify-content: space-between; }
  .jx.is-open .jx__label { display: grid; position: static; translate: none; justify-items: start; text-align: left; opacity: 1; text-shadow: none; pointer-events: auto; }
  .jx.is-open .jx__name { font-size: 0.6875rem; }
  .jx.is-open .jx__item.is-current .jx__name { font-size: 0.75rem; }
  .jx.is-open .jx__node:active .jx__name { color: var(--fg); }
  .jx.is-open .jx__dot { width: 22px; height: var(--jx-row-open); }
  .jx.is-open .jx__rail { top: calc(var(--jx-row-open) / 2); bottom: calc(var(--jx-row-open) / 2); right: 10.5px; }
  .jx.is-open .jx__head { display: grid; align-self: stretch; justify-items: start; margin: 2px 0 8px; padding: 0 0 10px; border-bottom: 1px solid var(--line); text-align: left; text-shadow: none; }
  .jx.is-open .jx__head-title { font-size: 0.6875rem; }
  .jx--journey.is-open .jx__label, .jx--journey.is-open .jx__item.is-option .jx__label { opacity: 0.6; }
  .jx--journey.is-open .jx__item.is-current .jx__label { opacity: 1; }
  .jx--journey.is-open .jx__name { font-size: 0.6875rem; }
  .jx--journey.is-open .jx__item.is-current .jx__name { font-size: 0.75rem; }
  .jx.is-open .jx__cta { justify-content: space-between; width: 100%; min-height: 44px; margin-top: 8px; padding: 12px 0 2px; border-top: 1px solid var(--line); font-size: 0.75rem; text-shadow: none; }

  /* a journey: no pill of its own — its bar at the foot opens it; the card sits just above that bar */
  .jx--journey .jx__toggle { display: none; }
  .jx--journey.is-open .jx__panel { left: var(--gutter); right: var(--gutter); width: auto; bottom: calc(76px + 10px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .jx, .jx.is-on, .jx__fill, .jx__label, .jx__dot::before, .jx-cover, .jx-cover.is-on { transition: none; }
  .jx { transform: none; }
}