/* ==========================================================================
   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.9s 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; }

/* ---------- 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; }

/* ---------- 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.8s var(--ease-out) 0.9s, visibility 0s; }
.rj[data-layout="choice"] .rj__way--east, .rj[data-layout="choice"] .rj__way--turkiye { transition-delay: 1.05s, 0s; }
.rj[data-layout="choice"] .rj__way--georgia { transition-delay: 1.2s, 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 film that takes the screen (layout "film"; the mix: js/region-journey.js) ----------
   The film plays in a layer under the map (.rj-film, before the stage's canvas): the map, its route, the
   names and the arrow thin out over it and give it the screen, then come back over it before the journey
   goes on. 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) */
.rj[data-layout="film"] .rj__col,
.rj[data-layout="film"] .rj__shade--side { opacity: var(--rj-map, 1); transition: none; }

/* A film the visitor scrolls through (a beat's scrub — the Los Angeles prototype): while it has the screen the journey's
   bars step back with the map; pointed at, or reached by the keyboard, they're there */
.rj.is-scrub .rj__top, .rj.is-scrub .rj__nav { opacity: calc(0.28 + 0.72 * var(--rj-map, 1)); transition: opacity 0.3s ease; }
.rj.is-scrub .rj__top:has(:focus-visible), .rj.is-scrub .rj__nav:has(:focus-visible) { opacity: 1; }
@media (hover: hover) { .rj.is-scrub .rj__top:hover, .rj.is-scrub .rj__nav:hover { opacity: 1; } }

/* 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) {
  .rj[data-layout="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: 1.05s, 0s; }
.rj[data-layout="choice"] .rj__way--dnipro { transition-delay: 1.15s, 0s; }
.rj[data-layout="choice"] .rj__way--mykolaiv { transition-delay: 1.25s, 0s; }
.rj[data-layout="choice"] .rj__way--odesa { transition-delay: 1.35s, 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: 1.05s, 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; }
}