/* ==========================================================================
   A REGION'S JOURNEY (js/region-journey.js) — North America, and the regions to come
   On the Asia stage's screen, over the atlas: the region's name and the ways out, the words and the
   work of each beat, the choice between the region's branches (on the map), the way on.
   data-layout (set by the engine, which frames the map in what's left): map · side (a photograph or
   film beside the map) · hero (a film taking most of the screen) · card · choice. data-media: the
   beat's work (photo · portrait · film · hero).
   ========================================================================== */

.rj {
  --rj-nav: 76px;
  --rj-top: calc(var(--header-h) + 70px);        /* where the words start, under the film's name */
  position: absolute;
  inset: 0;
  z-index: 3;                                     /* over the atlas's words (the arrow stays above, 4) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.rj.is-on { opacity: 1; }
.rj[hidden] { display: none; }

/* While the journey is open the page holds still: a scroll or swipe moves the journey on instead,
   and the way out is always on screen */
html.is-journey { overflow: hidden; }
html.is-journey .stage__screen { touch-action: none; }

/* The atlas's own words step aside */
.world.is-journey::before,
.world.is-journey .world__hint,
.world.is-journey .world__regions,
.world.is-journey .world__panel,
.world.is-journey .world__intro { opacity: 0 !important; visibility: hidden; pointer-events: none !important; transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s; }

/* ---------- Shades: the words and the work stay clear of the land beneath them ---------- */

.rj__shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-out);
}

.rj__shade--side { background: linear-gradient(90deg, rgba(28, 29, 31, 0.96) 0%, rgba(28, 29, 31, 0.9) 30%, rgba(28, 29, 31, 0.45) 46%, rgba(28, 29, 31, 0) 58%); }
.rj__shade--top { background: linear-gradient(180deg, rgba(28, 29, 31, 0.95) 0%, rgba(28, 29, 31, 0.82) 22%, rgba(28, 29, 31, 0) 36%); }
.rj__shade--foot { background: linear-gradient(0deg, rgba(28, 29, 31, 0.96) 0%, rgba(28, 29, 31, 0.7) calc(var(--rj-nav) + 10px), rgba(28, 29, 31, 0) calc(var(--rj-nav) + 70px)); opacity: 1; }

.rj:not([data-layout="choice"]) .rj__shade--side { opacity: 1; }
.rj[data-layout="hero"] .rj__shade--side { background: linear-gradient(90deg, rgba(28, 29, 31, 0.97) 0%, rgba(28, 29, 31, 0.92) 62%, rgba(28, 29, 31, 0.3) 70%, rgba(28, 29, 31, 0) 76%); }
.rj[data-layout="choice"] .rj__shade--top { opacity: 1; }

/* ---------- The film's name, always there; the ways out ---------- */

.rj__top {
  position: absolute;
  top: calc(var(--header-h) + 12px);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  transition: opacity 0.6s var(--ease-out);
}

.rj__id {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.5;
}

.rj__id-title { font-weight: 600; color: var(--fg); }
.rj__id-meta { font-weight: 500; color: var(--fg-muted); }
.rj__id { transition: opacity 0.6s var(--ease-out); }

.rj__top-actions {
  display: flex;
  align-items: center;
  gap: 8px 22px;
  flex-shrink: 0;
  pointer-events: auto;
}

.rj__exit { color: var(--fg); }
.rj__exit span[aria-hidden] { font-size: 1.1em; letter-spacing: 0; }

@media (hover: hover) {
}

.rj button:focus-visible, .rj a:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

/* ---------- The words and the work: one column ---------- */

.rj__col {
  position: absolute;
  left: var(--gutter);
  top: var(--rj-top);
  bottom: calc(var(--rj-nav) + 18px);
  width: calc(40vw - var(--gutter));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(18px, 2.4vh, 28px);
  transition: width 0.9s var(--ease-out), top 0.9s var(--ease-out);
}

.rj[data-layout="map"] .rj__col { width: min(26rem, calc(29vw - var(--gutter))); justify-content: center; }
.rj[data-layout="card"] .rj__col { width: min(40rem, calc(40vw - var(--gutter))); justify-content: center; }
.rj[data-layout="hero"] .rj__col { width: calc(65vw - var(--gutter)); gap: 16px; }
.rj[data-layout="choice"] .rj__col { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--header-h) + 64px); bottom: auto; align-items: center; text-align: center; }

.rj__caption { pointer-events: auto; flex-shrink: 0; }
.rj__caption.is-in > * { animation: rj-in 0.9s var(--ease-out) both; }
.rj__caption.is-in > *:nth-child(2) { animation-delay: 0.08s; }
.rj__caption.is-in > *:nth-child(3) { animation-delay: 0.14s; }
.rj__caption.is-in > *:nth-child(4) { animation-delay: 0.2s; }
.rj__caption.is-in > *:nth-child(5) { animation-delay: 0.26s; }

@keyframes rj-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

.rj__kicker { display: block; color: var(--fg-muted); }

.rj__title {
  margin-top: 12px;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}

.rj.is-big .rj__title { font-size: clamp(2.8rem, min(5.4vw, 10svh), 6rem); letter-spacing: -0.04em; line-height: 0.95; }
.rj[data-layout="hero"] .rj__title { font-size: clamp(1.6rem, 2.2vw, 2.4rem); }
.rj[data-layout="choice"] .rj__title { font-size: clamp(2.2rem, min(4vw, 8svh), 4.4rem); letter-spacing: -0.035em; }

.rj__sub {
  margin-top: 14px;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.rj__text {
  margin-top: 16px;
  max-width: 38ch;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--fg-muted);
}

@media (hover: hover) { .rj__film:hover { background: var(--fg); color: var(--bg); } }

/* The work: every photograph and film of the journey in one frame, the beat's own shown */
.rj__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 0;
  flex: 0 1 auto;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
}

.rj.has-media .rj__frame { opacity: 1; transform: none; transition-delay: 0.15s; }
.rj[data-layout="hero"] .rj__frame { aspect-ratio: 16 / 9; }
.rj[data-layout="map"] .rj__frame,
.rj[data-layout="card"] .rj__frame,
.rj[data-layout="choice"] .rj__frame { display: none; }

.rj-media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  /* (a slot whose file isn't there yet: a quiet, empty frame — never a stand-in picture) */
  background: linear-gradient(165deg, #2c2d30, #1f2022);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease-out), visibility 0s linear 0.7s;
}

.rj-media.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.7s var(--ease-out), visibility 0s; }

.rj-media img,
.rj-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rj-media.is-missing img,
.rj-media.is-missing video { visibility: hidden; }

.rj-media.is-missing::before {
  content: attr(data-file);
  position: absolute;
  left: 18px;
  right: 18px;
  top: 16px;
  overflow-wrap: anywhere;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(235, 233, 228, 0.34);
}

.rj-media__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 40px 18px 14px;
  background: linear-gradient(0deg, rgba(20, 21, 22, 0.7), rgba(20, 21, 22, 0));
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}

.rj-media__kind { color: var(--fg-muted); letter-spacing: 0.24em; }

@media (hover: hover) {
}

.rj__credit {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--rj-nav) + 10px);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  opacity: 0;
  pointer-events: auto;
}

.rj__credit a { color: inherit; }
/* (a film on the screen: in the corner of the map's window) */
.rj__credit.is-windowed { text-shadow: 0 0 4px rgba(28, 29, 31, 0.9); }

/* ---------- The way on ---------- */

.rj__nav {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: var(--rj-nav);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line);
  pointer-events: auto;
}

.rj__back,
.rj__next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.rj__back { justify-self: start; padding: 0; border: 0; background: none; color: var(--fg-muted); }
.rj__back-word { display: none; }
.rj__next { justify-self: end; padding: 0 22px; border: 1px solid rgba(235, 233, 228, 0.6); background: rgba(28, 29, 31, 0.6); }
.rj__next[hidden] { display: none; }
.rj__next-to { color: var(--fg-muted); }

@media (hover: hover) {
  .rj__back:hover { color: var(--fg); }
  .rj__next:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .rj__next:hover .rj__next-to { color: inherit; }
}

.rj__where { display: grid; justify-items: center; gap: 3px; text-align: center; }
.rj__place { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); }
.rj__step { font-size: 0.625rem; letter-spacing: 0.2em; color: var(--fg-dim); font-variant-numeric: tabular-nums; }

/* ---------- Phones (and tall portrait screens) ---------- */

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .rj { --rj-top: calc(var(--header-h) + 44px); }

  .rj__top { top: calc(var(--header-h) + 4px); gap: 12px; }
  .rj__id { display: grid; gap: 1px; min-width: 0; font-size: 0.625rem; letter-spacing: 0.14em; }
  .rj__id > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .rj__id-credit { display: none; }
  /* (on the ways on from Zhytomyr, the way back to the choice takes the place of the second line) */
  .rj.is-branch .rj__id-meta { display: none; }
  .rj.is-branch .rj__id { align-self: center; }
  .rj__exit-the { display: none; }
  .rj__top-actions { gap: 14px; }

  .rj__shade--side { display: none; }
  .rj__shade--top { opacity: 1; background: linear-gradient(180deg, rgba(28, 29, 31, 0.96) 0%, rgba(28, 29, 31, 0.86) calc(var(--header-h) + 150px), rgba(28, 29, 31, 0) calc(var(--header-h) + 220px)); }

  /* One column, the width of the screen: where it starts follows the layout (js/ukraine.js frames
     the map in what's left) */
  .rj__col,
  .rj[data-layout] .rj__col {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    top: var(--rj-top);
    bottom: calc(var(--rj-nav) + 12px);
    gap: 12px;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    transition: none;
  }

  /* side: the map above (to 46% of the screen), the words and the work below it */
  .rj[data-layout="side"] .rj__col { top: calc(46% + 8px); }
  .rj[data-layout="side"] .rj__shade--top { background: linear-gradient(180deg, rgba(28, 29, 31, 0.9) 0%, rgba(28, 29, 31, 0) calc(var(--header-h) + 64px)); }
  .rj[data-layout="side"] .rj__shade--foot { background: linear-gradient(0deg, rgba(28, 29, 31, 0.98) 0%, rgba(28, 29, 31, 0.96) 52%, rgba(28, 29, 31, 0) 58%); }
  /* hero: the film first, the words under it, the map below */
  .rj[data-layout="hero"] .rj__frame { order: -1; }
  .rj[data-layout="hero"] .rj__shade--top { background: linear-gradient(180deg, rgba(28, 29, 31, 0.97) 0%, rgba(28, 29, 31, 0.94) calc(var(--header-h) + 44px + (100vw - 2 * var(--gutter)) * 0.5625 + 70px), rgba(28, 29, 31, 0) calc(var(--header-h) + 44px + (100vw - 2 * var(--gutter)) * 0.5625 + 110px)); }
  /* card: a chapter's title at the top, the map below it */
  .rj[data-layout="card"] .rj__shade--top { background: linear-gradient(180deg, rgba(28, 29, 31, 0.97) 0%, rgba(28, 29, 31, 0.9) 42%, rgba(28, 29, 31, 0) 52%); }
  /* choice: the question, the map, the two ways under it */
  .rj[data-layout="choice"] .rj__col { bottom: auto; }

  .rj__frame { flex: 0 1 auto; max-height: 100%; }
  .rj__caption { flex-shrink: 0; }

  .rj__title { margin-top: 8px; font-size: clamp(1.7rem, 7.6vw, 2.4rem); }
  .rj.is-big .rj__title { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  .rj[data-layout="hero"] .rj__title { font-size: 1.5rem; }
  .rj[data-layout="choice"] .rj__title { font-size: clamp(1.8rem, 8.4vw, 2.6rem); }
  .rj__sub { margin-top: 10px; font-size: 0.875rem; }
  .rj__text { margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; }

  .rj-media__cap { padding: 30px 14px 10px; font-size: 0.625rem; }

  .rj__credit { bottom: calc(var(--rj-nav) + 2px); }
  .rj[data-layout="side"] .rj__credit { bottom: auto; top: calc(46% - 12px); }

  .rj__nav { gap: 10px; grid-template-columns: auto 1fr auto; }
  .rj__back-to { display: none; }
  .rj__back-word { display: inline; }
  .rj__back, .rj__next { letter-spacing: 0.16em; }
  .rj__next { padding: 0 16px; }
  .rj__next-to { display: none; }
  /* (at an end, the button says where it goes; the step count gives it the room) */
  .rj.is-end .rj__next-to { display: inline; color: inherit; }
  .rj.is-end .rj__next-word { display: none; }
  .rj.is-end .rj__next { justify-self: end; max-width: 100%; }
  .rj.is-end .rj__where { display: none; }
  .rj.is-end .rj__nav { grid-template-columns: auto 1fr; }
  .rj__where { justify-items: center; min-height: 44px; align-content: center; padding: 0 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.12s ease; }
  .rj__where:active { opacity: 0.65; }
  .rj__place { font-size: 0.6875rem; letter-spacing: 0.16em; }
  .rj__place::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-left: 1px solid currentColor; border-top: 1px solid currentColor; transform: translateY(-1px) rotate(45deg); opacity: 0.6; }
  /* (the way through the journey: a line along the top of its bar) */
  .rj__nav::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: rgba(235, 233, 228, 0.7); transform-origin: 0 50%; transform: scaleX(var(--rj-progress, 0)); transition: transform 0.6s var(--ease-out); }
  .rj[data-layout="choice"] .rj__nav::before { opacity: 0; }
}

/* ---------- Short, wide screens (a phone on its side) ---------- */

@media (max-height: 540px) and (min-aspect-ratio: 5/4) {
  .rj { --rj-nav: 58px; --rj-top: calc(var(--header-h) + 40px); }
  .rj__top { top: calc(var(--header-h) + 4px); }
  .rj__id-credit { display: none; }
  .rj__title, .rj.is-big .rj__title { font-size: 1.6rem; }
  .rj__text { display: none; }
}

/* Reduced motion: the journey's moves are the stage's; nothing here animates on its own */
@media (prefers-reduced-motion: reduce) {
  .rj__caption.is-in > * { animation: none; }
}

/* ---------- The work: its shapes ---------- */

.rj[data-media="portrait"] .rj__frame { aspect-ratio: 4 / 5; width: auto; height: min(100%, 62svh); max-width: 100%; align-self: flex-start; }
.rj[data-media="film"] .rj__frame,
.rj[data-media="hero"] .rj__frame { aspect-ratio: 16 / 9; }
/* (a photograph at its own shape — its `ratio`: the whole of it; two side by side, the frame as wide as both — the
   engine sets --rj-ratio, and each one's place in a pair) */
.rj[data-ratio] .rj__frame { aspect-ratio: var(--rj-ratio); }
.rj[data-ratio] .rj-media img { object-fit: contain; }
.rj[data-media="pair"] .rj-media { box-shadow: 0 24px 50px -34px rgba(0, 0, 0, 0.8); }
.rj-media--also .rj-media__cap { display: none; }
.rj[data-ratio="tall"] .rj-media__cap, .rj[data-ratio="pair"] .rj-media__cap { flex-wrap: wrap; row-gap: 4px; }

/* ---------- The choice: the region's branches, on the map ---------- */

.rj__choice { position: absolute; inset: 0; pointer-events: none; }

/* (wide screens: each branch over the sea beside its part of the map — placed there by the engine) */
.rj__way {
  position: absolute;
  left: 0;
  top: 0;
  width: min(16rem, 22vw);
  translate: -50% -50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s;
}

.rj[data-layout="choice"] .rj__way:not(.is-away) { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.45s var(--ease-out) 0.2s, visibility 0s; }
.rj[data-layout="choice"] .rj__way--east, .rj[data-layout="choice"] .rj__way--turkiye { transition-delay: 0.28s, 0s; }
.rj[data-layout="choice"] .rj__way--georgia { transition-delay: 0.36s, 0s; }

.rj__way-pick {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 20px 22px 19px;
  border: 1px solid rgba(235, 233, 228, 0.42);
  background: rgba(28, 29, 31, 0.8);
  font: inherit;
  text-align: left;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.rj__way-name { font-size: clamp(1.8rem, 2.4vw, 2.6rem); font-weight: 300; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; }
.rj__way-line { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; line-height: 1.5; text-transform: uppercase; color: var(--fg-muted); }

/* what the branch covers: shown while it's pointed at, or chosen (a touch) */
.rj__way-more {
  display: grid;
  gap: 12px;
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  border: 1px solid transparent;
  border-top: 0;
  background: rgba(28, 29, 31, 0.8);
  opacity: 0;
  transition: max-height 0.5s var(--ease-out), opacity 0.4s var(--ease-out), padding 0.5s var(--ease-out);
}

.rj__way-where { font-size: 0.8125rem; font-weight: 300; line-height: 1.55; color: var(--fg-muted); }

.rj__way-go {
  justify-self: start;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(235, 233, 228, 0.6);
  background: transparent;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
}

.rj__way.is-hot .rj__way-pick { border-color: var(--fg); background: rgba(40, 41, 44, 0.9); }
.rj__way.is-hot .rj__way-more { max-height: 16rem; opacity: 1; padding: 14px 22px 18px; border-color: rgba(235, 233, 228, 0.42); }
.rj__way.is-picked .rj__way-go { display: inline-flex; }
.rj__way.is-picked .rj__way-pick { border-color: var(--fg); }

@media (hover: hover) {
  .rj__way-go:hover { background: var(--fg); color: var(--bg); }
}

.rj__to-choice[hidden] { display: none; }
.rj__exit { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0; border: 0; background: none; font: inherit; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); cursor: pointer; }
.rj__to-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0; border: 0; background: none; font: inherit; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); cursor: pointer; }
@media (hover: hover) { .rj__to-choice:hover { color: var(--fg); } }

/* ---------- Phones: the map above, the two branches below it, one under the other ---------- */

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .rj__choice {
    inset: auto var(--gutter) calc(var(--rj-nav) + 12px);
    top: calc(58% + 6px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
  }
  .rj__way { position: relative; width: 100%; translate: none; transform: none !important; }
  .rj__way.is-away { display: none; }
  .rj__way-pick { padding: 13px 16px 12px; gap: 5px; }
  .rj__way-name { font-size: 1.3rem; }
  .rj__way-line { font-size: 0.625rem; letter-spacing: 0.14em; }
  .rj__way.is-hot .rj__way-more { padding: 10px 16px 12px; }
  .rj__way-where { font-size: 0.75rem; }
  /* (one chosen: the other steps back to leave it room) */
  .rj.has-pick .rj__way:not(.is-picked) .rj__way-line { display: none; }
  .rj__to-choice, .rj__exit { font-size: 0.625rem; letter-spacing: 0.12em; white-space: nowrap; }
  .rj[data-media="portrait"] .rj__frame { height: auto; width: 62%; }
  /* (a tall photograph at its own shape: as tall as the room under the words allows) */
  .rj[data-ratio="tall"] .rj__frame { width: auto; height: min(100%, 40svh); max-width: 62%; }
}

/* ---------- A film that takes the screen (layout "film"; the mix: lib/regions/journey.ts) ----------
   The film plays in a layer under the map (.rj-film, before the stage's canvas). As the visitor scrolls it in,
   the map, its route and the arrow draw aside — a wide screen: into the film's top right corner; a phone: below
   the film, which keeps its 16:9 across the top — the canvas and the veil under it fading at soft edges into
   the film (masks set by the engine). The veil (the page's tone) keeps the film out of sight while the map is
   whole. */

.rj-film { --rj-nav: 76px; position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.rj-film.is-on { visibility: visible; }
.rj-film__veil { position: absolute; inset: 0; background: var(--bg); }
.rj-film .rj-media { inset: var(--header-h) 0 var(--rj-nav) 0; box-shadow: none; transition: none; }
.rj-film .rj-media.is-on { visibility: visible; }
.rj-film .rj-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(to top, rgba(28, 29, 31, 0.55), rgba(28, 29, 31, 0));
  pointer-events: none;
}
.rj-film .rj-media__cap { z-index: 1; padding: 40px var(--gutter) 16px; background: none; }
.rj-film .rj-media.is-missing::before { top: auto; bottom: 58px; left: var(--gutter); right: var(--gutter); }

.rj[data-layout="film"] .rj__col,
.rj[data-layout="summary"] .rj__col { width: min(26rem, calc(29vw - var(--gutter))); justify-content: center; }
.rj[data-layout="film"] .rj__frame,
.rj[data-layout="summary"] .rj__frame { display: none; }
/* (the words and their shade go with the map — the next place's too, while the film goes out as the journey moves) */
.rj[data-layout="film"] .rj__col,
.rj[data-layout="film"] .rj__shade--side,
.rj.has-film .rj__col,
.rj.has-film .rj__shade--side { opacity: var(--rj-map, 1); transition: none; }

/* The look back at a branch's end (layout "summary"): the whole way travelled, the words kept small */
.rj[data-layout="summary"] .rj__title { font-size: clamp(1.5rem, 2vw, 2.2rem); }
.rj[data-layout="summary"] .rj__col { width: min(22rem, calc(24vw - var(--gutter))); }
.rj[data-layout="summary"] .rj__shade--side { background: linear-gradient(90deg, rgba(28, 29, 31, 0.94) 0%, rgba(28, 29, 31, 0.78) 20%, rgba(28, 29, 31, 0) 33%); }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  /* a phone: the film whole, at its own shape (--video-ratio: lib/page/video-shape.ts), at the top under the region's
     name (--rj-film-top: the engine) — the width of the screen if it's wide, at most about half the room below if it
     stands up, centred — its words beneath it, and only its very foot softened into the page's tone, where the map,
     below them, fades in */
  .rj-film .rj-media {
    --film-max-h: calc((100svh - var(--rj-film-top, calc(var(--header-h) + 60px)) - var(--rj-nav)) * 0.56);
    inset: var(--rj-film-top, calc(var(--header-h) + 60px)) auto auto 50%;
    translate: -50% 0;
    width: min(100%, calc(var(--film-max-h) * var(--video-ratio, 1.7778)));
    height: auto;
    aspect-ratio: var(--video-ratio, 16 / 9);
  }
  .rj-film .rj-media { overflow: visible; }
  .rj-film .rj-media video { object-fit: contain; -webkit-mask-image: linear-gradient(to bottom, #000 90%, rgba(0, 0, 0, 0.35)); mask-image: linear-gradient(to bottom, #000 90%, rgba(0, 0, 0, 0.35)); }
  .rj-film .rj-media::after { display: none; }
  .rj-film .rj-media__cap { top: 100%; bottom: auto; padding: 10px var(--gutter) 0; }
  .rj-film .rj-media.is-missing::before { bottom: 40px; }
  .rj[data-layout="film"] .rj__shade--top,
  .rj.has-film .rj__shade--top { opacity: var(--rj-map, 1); transition: none; }
  .rj[data-layout="summary"] .rj__title { font-size: 1.5rem; }
  .rj[data-layout="film"] .rj__col,
  .rj[data-layout="summary"] .rj__col { width: auto; justify-content: flex-start; }
}

/* ---------- An almost full-screen film (layout "full"): the film leads, the map a strip beside it ---------- */

.rj[data-layout="full"] .rj__col { width: calc(81vw - var(--gutter)); top: calc(var(--header-h) + 58px); gap: 14px; }
.rj[data-layout="full"] .rj__frame { aspect-ratio: 16 / 9; }
.rj[data-layout="full"] .rj__title { font-size: clamp(1.4rem, 1.8vw, 2rem); }
.rj[data-layout="full"] .rj__shade--side { background: linear-gradient(90deg, rgba(28, 29, 31, 0.97) 0%, rgba(28, 29, 31, 0.94) 80%, rgba(28, 29, 31, 0.3) 84%, rgba(28, 29, 31, 0) 88%); }

/* ---------- The work, integrated (the portfolio's frame treatment: a light fade at the foot, a soft
   depth) — the Nordics and West Asia; other regions opt in the same way ---------- */

.rj--nordics .rj-media, .rj--west-asia .rj-media, .rj--uk .rj-media { box-shadow: 0 34px 70px -46px rgba(0, 0, 0, 0.75); }
.rj--nordics .rj-media::after, .rj--west-asia .rj-media::after, .rj--uk .rj-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 32%;
  background: linear-gradient(to top, rgba(28, 29, 31, 0.4), rgba(28, 29, 31, 0.12) 48%, rgba(28, 29, 31, 0));
  pointer-events: none;
}
.rj--nordics .rj-media__cap, .rj--west-asia .rj-media__cap, .rj--uk .rj-media__cap { z-index: 1; background: none; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  /* the film edge to edge, at the top; the words under it; the map below */
  .rj[data-layout="full"] .rj__col { top: calc(var(--header-h) + 34px); }
  .rj[data-layout="full"] .rj__frame { order: -1; width: 100vw; max-width: none; margin-left: calc(-1 * var(--gutter)); }
  .rj[data-layout="full"] .rj__shade--top { opacity: 1; background: linear-gradient(180deg, rgba(28, 29, 31, 0.97) 0%, rgba(28, 29, 31, 0.94) calc(var(--header-h) + 34px + 56.25vw + 64px), rgba(28, 29, 31, 0) calc(var(--header-h) + 34px + 56.25vw + 110px)); }
  .rj[data-layout="full"] .rj__title { font-size: 1.4rem; }
}

/* ---------- A region's own film link (the top bar), its opening beat ---------- */

.rj__watch { display: inline-flex; align-items: center; min-height: 36px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); text-decoration: none; }
@media (hover: hover) { .rj__watch:hover { color: var(--fg); } }
.rj.is-first .rj__id { opacity: 0; }

/* ---------- A region's dated context: its legend (Ukraine: the conflict areas, 16 February 2025) ---------- */

.rj-legend {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--rj-nav) + 18px);
  z-index: 1;
  display: grid;
  gap: 7px;
  max-width: 22rem;
  padding: 14px 16px 13px;
  border-left: 2px solid rgba(214, 86, 64, 0.8);
  background: rgba(28, 29, 31, 0.78);
  font-size: 0.6875rem;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
}
.rj[data-layout="side"] .rj-legend,
.rj[data-layout="film"] .rj-legend { left: auto; right: var(--gutter); }
.rj-legend__date { font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); }
.rj-legend__keys { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--fg); }
.rj-legend__key { display: inline-flex; align-items: center; gap: 7px; }
.rj-legend__key::before { content: ""; width: 12px; height: 9px; }
.rj-legend__key--occupied::before { background: rgba(165, 39, 20, 0.6); border: 1px solid rgba(214, 86, 64, 0.85); }
.rj-legend__key--unclear::before { background: rgba(176, 58, 40, 0.2); border: 1px dashed rgba(214, 96, 74, 0.6); }
.rj-legend__note { color: var(--fg-muted); }

/* ---------- Ukraine: the photographs a little larger; five chapters at the hub, compact on the map ---------- */

.rj--ukraine .rj-media { box-shadow: 0 34px 70px -46px rgba(0, 0, 0, 0.75); }
.rj--ukraine .rj-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 32%; background: linear-gradient(to top, rgba(28, 29, 31, 0.4), rgba(28, 29, 31, 0.12) 48%, rgba(28, 29, 31, 0)); pointer-events: none; }
.rj--ukraine .rj-media__cap { z-index: 1; background: none; }
.rj--ukraine[data-layout="side"] .rj__col { width: calc(43vw - var(--gutter)); }
.rj--ukraine .rj__way { width: min(12.5rem, 16vw); }
.rj--ukraine .rj__way-pick { padding: 14px 16px 13px; gap: 7px; }
.rj--ukraine .rj__way-name { font-size: clamp(1.25rem, 1.6vw, 1.7rem); }
/* (the hub's question at the top left: the top of the map is Kyiv's) */
.rj--ukraine[data-layout="choice"] .rj__col { left: var(--gutter); right: auto; width: min(24rem, 30vw); align-items: flex-start; text-align: left; }
.rj--ukraine[data-layout="choice"] .rj__title { font-size: clamp(1.9rem, 2.8vw, 3rem); }
.rj[data-layout="choice"] .rj__way--kharkiv { transition-delay: 0.28s, 0s; }
.rj[data-layout="choice"] .rj__way--dnipro { transition-delay: 0.34s, 0s; }
.rj[data-layout="choice"] .rj__way--mykolaiv { transition-delay: 0.4s, 0s; }
.rj[data-layout="choice"] .rj__way--odesa { transition-delay: 0.46s, 0s; }

/* ---------- The UK: the photographs a little larger (as Ukraine's); England or Scotland, then Edinburgh or the Highlands ---------- */

.rj--uk[data-layout="side"] .rj__col { width: calc(43vw - var(--gutter)); }
.rj[data-layout="choice"] .rj__way--scotland, .rj[data-layout="choice"] .rj__way--highlands { transition-delay: 0.28s, 0s; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .rj-legend,
  .rj[data-layout] .rj-legend { left: var(--gutter); right: auto; bottom: calc(var(--rj-nav) + 14px); max-width: calc(100% - 2 * var(--gutter)); padding: 10px 12px 9px; gap: 5px; font-size: 0.625rem; }
  .rj[data-layout="side"] .rj-legend { bottom: auto; top: calc(46% - 76px); }
  .rj[data-layout="side"] .rj-legend__note { display: none; }
  .rj__watch { display: none; }
  .rj.is-first .rj__watch { display: inline-flex; }
  /* (at the choice: the legend just above the chapters, short) */
  .rj[data-layout="choice"] .rj-legend { bottom: auto; top: calc(58% - 50px); }
  .rj[data-layout="choice"] .rj-legend__note { display: none; }
  /* (five chapters: two columns of names; the one chosen spans both and says what it holds) */
  .rj--ukraine .rj__choice { display: grid; grid-template-columns: 1fr 1fr; align-content: end; gap: 6px; }
  .rj--ukraine .rj__way { width: auto; }
  .rj--ukraine .rj__way.is-picked { grid-column: 1 / -1; }
  .rj--ukraine .rj__way-pick { padding: 10px 12px 9px; gap: 3px; }
  .rj--ukraine .rj__way-name { font-size: 1.05rem; }
  .rj--ukraine .rj__way-line { font-size: 0.5625rem; letter-spacing: 0.12em; }
  .rj--ukraine .rj__way:not(.is-picked) .rj__way-line { display: none; }
  .rj--ukraine[data-layout="side"] .rj__col { width: auto; }
  .rj--uk[data-layout="side"] .rj__col { width: auto; }
  .rj--ukraine[data-layout="choice"] .rj__col { right: var(--gutter); width: auto; }
}

/* ---------- A place's identity: its flag, small, beside the words (js/flags.js; the deepest one given) ---------- */

.rj__flag { display: inline-block; height: 10px; width: auto; margin-right: 10px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(235, 233, 228, 0.16); }

/* ---------- A card and its place (a branch's `at`): when the place is too small, or too crowded, for the card, the card
   sits nearby and a fine line leads to a small ring on the place itself (inside the card: it fades and lights with it) ---------- */

.rj__way { isolation: isolate; }
.rj__way-lead { position: absolute; left: 0; top: 0; z-index: -1; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.rj__way-lead line { stroke: rgba(235, 233, 228, 0.42); stroke-width: 1; transition: stroke var(--dur-fast) ease; }
.rj__way-lead circle { fill: rgba(28, 29, 31, 0.55); stroke: rgba(235, 233, 228, 0.85); stroke-width: 1; }
.rj__way.is-hot .rj__way-lead line { stroke: rgba(235, 233, 228, 0.85); }
.rj__way.is-hot .rj__way-lead circle { fill: var(--fg); }

/* ---------- Many ways on at once (six or more — Continental Europe): the same cards, compact ---------- */

.rj.is-many .rj__way { width: min(11rem, 14vw); }
.rj.is-many .rj__way-pick { gap: 6px; padding: 12px 14px 11px; }
.rj.is-many .rj__way-name { font-size: clamp(1rem, 1.25vw, 1.35rem); }
.rj.is-many .rj__way-line { font-size: 0.5625rem; letter-spacing: 0.16em; }
.rj.is-many .rj__way.is-hot .rj__way-more { padding: 10px 14px 12px; }
.rj.is-many .rj__way-where { font-size: 0.75rem; }
/* (the question at the top left: the top of the map is for the cards) */
.rj.is-many[data-layout="choice"] .rj__col { left: var(--gutter); right: auto; width: min(24rem, 30vw); align-items: flex-start; text-align: left; }
.rj.is-many[data-layout="choice"] .rj__title { font-size: clamp(1.9rem, 2.8vw, 3rem); }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .rj__way-lead { display: none; }
  .rj.is-many .rj__choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: end; gap: 6px; }
  .rj.is-many .rj__way { width: auto; }
  .rj.is-many .rj__way.is-picked { grid-column: 1 / -1; }
  .rj.is-many .rj__way-pick { gap: 3px; padding: 10px 12px 9px; }
  .rj.is-many .rj__way-name { font-size: 0.8125rem; letter-spacing: 0.12em; }
  .rj.is-many .rj__way:not(.is-picked) .rj__way-line { display: none; }
  .rj.is-many[data-layout="choice"] .rj__col { right: var(--gutter); width: auto; }
}