/* ==========================================================================
   INTERFACE POLISH — one interaction language for every control on the page (loaded last: it adds states,
   it doesn't restyle). A press answers every tap or click at once; arrows lean the way they go (back up the
   hierarchy, they lean back); the choice cards rise in and lift when pointed at; the work's own marks carry
   the one warm accent; on touch screens every control is a finger's size and its words can be read.
   Motion is short and quiet — and under prefers-reduced-motion, base.css stills all of it.
   ========================================================================== */

:root {
  --accent-warm: #d9a04b;      /* the one warm accent: the work (a film, a photograph), and the shortcut to it */
}

/* ---------- A press: every control answers at once (scale: its own property, so it never fights a
   control's own transform or position) ---------- */

.site-nav a, .hero__scroll, .world__start, .world__go, .world__enter, .world__back, .world__region, .world__watch,
.rj__back, .rj__next, .rj__to-choice, .rj__exit, .rj__watch, .rj__way-pick, .rj__way-go, .rj__where,
.lightbox__close, .text-link, .doc__player, .jx__cta, .jx__node, .jx__toggle, .contact-email, .socials a, .site-footer a { -webkit-tap-highlight-color: transparent; }

.world__start:active, .world__go:active, .world__enter:not(.is-soon):active, .rj__next:active, .rj__way-go:active,
.world__region:active, .doc__player:active { scale: 0.97; }
.rj__way-pick:active { scale: 0.985; }
.rj__back:active, .rj__to-choice:active, .rj__exit:active, .rj__watch:active, .world__back:active, .site-nav a:active,
.hero__scroll:active, .jx__cta:active, .text-link:active, .lightbox__close:active, .contact-email:active, .socials a:active,
.site-footer a:active { opacity: 0.6; }

/* ---------- Arrows lean the way they go ---------- */

.rj__next > span[aria-hidden], .rj__back > span[aria-hidden], .rj__to-choice > span[aria-hidden], .rj__way-line > span[aria-hidden],
.rj__way-go > span[aria-hidden], .world__go span[aria-hidden], .world__enter span[aria-hidden], .world__back span[aria-hidden],
.world__region-cta span[aria-hidden], .rj__exit > span[aria-hidden] {
  display: inline-block;
  transition: translate 0.35s var(--ease-out), rotate 0.45s var(--ease-out);
}
@media (hover: hover) {
  .rj__next:hover > span[aria-hidden], .rj__way-pick:hover .rj__way-line > span[aria-hidden], .rj__way-go:hover > span[aria-hidden],
  .world__go:hover span[aria-hidden], .world__enter:not(.is-soon):hover span[aria-hidden], .world__region:hover .world__region-cta span[aria-hidden] { translate: 4px 0; }
  .rj__back:hover > span[aria-hidden], .world__back:hover span[aria-hidden] { translate: -4px 0; }
  .rj__to-choice:hover > span[aria-hidden] { rotate: -70deg; }
  .rj__exit:hover > span[aria-hidden] { rotate: 90deg; }
}

/* the quieter ways back: a touch more present (they're how nobody gets trapped) */
.rj__back, .rj__to-choice { color: rgba(235, 233, 228, 0.78); }

/* ---------- The choice cards: they rise in, lift when pointed at, and read as choosable ---------- */

.rj__way-pick { transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, translate 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.rj[data-layout="choice"] .rj__way:not(.is-away) .rj__way-pick { animation: rj-way-in 0.8s var(--ease-out) 0.9s backwards; }
.rj[data-layout="choice"] .rj__way--scotland:not(.is-away) .rj__way-pick,
.rj[data-layout="choice"] .rj__way--highlands:not(.is-away) .rj__way-pick,
.rj[data-layout="choice"] .rj__way--mallorca:not(.is-away) .rj__way-pick,
.rj[data-layout="choice"] .rj__way--barcelona:not(.is-away) .rj__way-pick { animation-delay: 1.02s; }
.rj[data-layout="choice"] .rj__way--gibraltar:not(.is-away) .rj__way-pick,
.rj[data-layout="choice"] .rj__way--madrid:not(.is-away) .rj__way-pick { animation-delay: 1.14s; }
@keyframes rj-way-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rj__way-pick { animation: none !important; } }   /* (still: the cards are simply there) */
@media (hover: hover) {
  .rj__way.is-hot .rj__way-pick { translate: 0 -2px; box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.9); }
}
.rj__way-pick:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

/* ---------- The work's own marks: ▶ a film, ● a photograph — in the warm accent ---------- */

.rj-media__kind::before { content: "●"; display: inline-block; margin-right: 7px; font-size: 0.85em; color: var(--accent-warm); }
.rj-media--film .rj-media__kind::before, .rj-media--hero .rj-media__kind::before, .rj-media--full .rj-media__kind::before { content: "▶"; font-size: 0.8em; }

/* ---------- No sideways drift: the arrow travelling near the edge never widens the page (clip, not hidden — the
   pinned stages inside keep the page as their scroller) ---------- */

.journey { overflow-x: clip; }

/* ---------- Touch screens: a finger's size for every control, words that can be read ---------- */

@media (pointer: coarse), (max-width: 760px) {
  .site-nav a { padding: 14px 6px; margin: -14px -6px; }
  .site-nav a::after { left: 6px; right: calc(6px + 0.28em); bottom: 8px; }   /* (the underline stays under the word) */
  .rj__to-choice, .rj__exit, .rj__watch { min-height: 44px; }
  .world__region { min-height: 44px; }
  .stage__credit a, .rj__credit a { padding-block: 14px; }
  .socials a, .site-footer a { display: inline-block; padding-block: 14px; margin-block: -14px; }
}
@media (max-width: 480px) {
  .site-nav a { font-size: 0.6875rem; letter-spacing: 0.18em; }
}
/* (the docked name and the three links share one line: tighter spacing, never smaller words — until the narrowest) */
@media (max-width: 420px) {
  .site-nav { gap: 12px; }
  .site-nav a { letter-spacing: 0.1em; }
  .site-nav a::after { right: calc(6px + 0.1em); }
}
@media (max-width: 359px) {
  .site-nav { gap: 9px; }
  .site-nav a { font-size: 0.625rem; letter-spacing: 0.06em; padding-inline: 4px; margin-inline: -4px; }
  .site-nav a::after { left: 4px; right: calc(4px + 0.06em); }
}
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .world__region-name { font-size: 0.6875rem; }
  .rj__to-choice, .rj__exit, .rj__watch { font-size: 0.6875rem; }
  .rj-media__cap, .rj__step { font-size: 0.6875rem; }
  .dest__context { font-size: 0.6875rem; }
  .doc__roles, .kyiv-place__sub, .rj__id { font-size: 0.6875rem; }
  .rj__way-line, .rj.is-many .rj__way-line, .rj--ukraine .rj__way-line { font-size: 0.6875rem; }
  .rj__way-pick { min-height: 44px; align-content: center; }   /* (the compact chips too: a finger's size — Malta, Andorra) */
  /* (the map credit, short: the attribution stays, the room goes to the work — and above the chapter pill) */
  .credit__long { display: none; }
  .stage__credit { bottom: calc(14px + 44px + 16px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Hero films on portrait screens — a region's film beats, Cyprus's and Forest City's opening films: large
   and immersive. Full width and most of the screen: a window taller than the film, so its crop stays moderate
   (--film-tall, the window's height to its width: 1.5 keeps ~38% of a 16:9 frame's width — never the ~25% sliver of a
   full-screen crop), its top and bottom edges dissolving into the page's tone — never a card. Per film: focus (the
   part of the frame to keep: object-position), tall (its own --film-tall), fit 'cover' (the whole screen), fit
   'whole' (the entire frame at its own shape, as an embedded film). ---------- */

.rj-media img, .rj-media video, .stage-video video { object-position: var(--focus, 50% 50%); }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  /* a region's film beat: centred between the site's header and the journey's bar, its words at its foot as before */
  .rj-film .rj-media:not(.is-cover):not(.is-whole) {
    --film-h: min(calc(100% - var(--header-h) - var(--rj-nav)), calc(100vw * var(--film-tall, 1.5)));
    top: calc(var(--header-h) + (100% - var(--header-h) - var(--rj-nav) - var(--film-h)) / 2);
    bottom: auto;
    height: var(--film-h);
  }
  .rj-film .rj-media:not(.is-cover):not(.is-whole):not(.is-missing) { background: none; }
  /* a chapter's opening film: centred on the screen — the chapter's title above it, its words below, as before */
  .js .stage:not(.is-static) .stage-video--fill:not(.is-cover):not(.is-whole) { background: var(--bg); }
  .js .stage:not(.is-static) .stage-video--fill:not(.is-cover):not(.is-whole) video {
    --film-h: min(100%, calc(100vw * var(--film-tall, 1.5)));
    top: calc((100% - var(--film-h)) / 2);
    bottom: auto;
    height: var(--film-h);
  }
  .rj-film .rj-media:not(.is-cover):not(.is-whole) :is(img, video),
  .js .stage:not(.is-static) .stage-video--fill:not(.is-cover):not(.is-whole) video {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  }

  /* fit 'whole': the entire frame, full width at its own shape, its words beneath it */
  .rj-film .rj-media.is-whole {
    top: calc(var(--header-h) + (100% - var(--header-h) - var(--rj-nav) - 56.25vw) / 2 - 22px);
    bottom: auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .rj-film .rj-media.is-whole::after { display: none; }
  .rj-film .rj-media.is-whole .rj-media__cap { top: 100%; bottom: auto; padding: 14px var(--gutter) 0; }
  .rj-film .rj-media.is-whole.is-missing::before { bottom: 12px; }
  .js .stage:not(.is-static) .stage-video--fill.is-whole {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-h) + 108px) 0 calc(72px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
  }
  .js .stage:not(.is-static) .stage-video--fill.is-whole video { position: relative; inset: auto; flex: none; height: auto; aspect-ratio: 16 / 9; }
  .js .stage:not(.is-static) .stage-video--fill.is-whole::after { display: none; }
  .js .stage:not(.is-static) .stage-video--fill.is-whole .stage-video__caption { position: relative; left: auto; right: auto; bottom: auto; margin: 20px var(--gutter) 0; }
}