/* ==========================================================================
   Redix Digital: the pages of the site other than the home page
   (accessibility.html, privacy.html, privacy-check.html; the way back up on
   every page but the home page). v2.css draws the parts they share with the
   home page; this adds the world behind them.
   The world is the home page's sky, kept as a still (two captures of its
   drawing): a page that is read gets the same place without the motion.
   ========================================================================== */

/* Fixed behind everything. The horizon stands at two thirds of the picture, and the position
   keeps it at two thirds of any screen; a tall screen gets a picture framed for it. */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #070b1a url("../img/sky-still-wide.webp") 50% 66% / cover no-repeat;
  pointer-events: none;
}

@media (max-aspect-ratio: 4/5) {
  .sky { background-image: url("../img/sky-still-tall.webp"); }
}

/* Everything that is read stands in front of the sky, as on the home page */
.sub-page main {
  position: relative;
  z-index: 3;
}

/* The colour modes of the accessibility menu and the system's forced colours flatten the page:
   the picture would shine through */
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .sky { display: none !important; }

@media (forced-colors: active) {
  .sky { display: none !important; }
}

/* --- The way back up -----------------------------------------------------------------------------
   Above the title of every page but the home page (Roei, 2026-10-16): the home page, then the
   page itself. Small and quiet, in the light text of the page; the arrow between them points on,
   to the left, as the arrows of the home page do. The page itself is not a link. */
.crumbs {
  position: relative;
  z-index: 3;
  margin: 0 0 clamp(12px, 2vh, 20px);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-mid);
}

.crumbs li + li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* a finger's target: the padding widens where it can be pressed without moving the line */
.crumbs a {
  padding-block: 8px;
  color: var(--text-mid);
  text-decoration: underline;
  text-decoration-color: rgba(194, 205, 232, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.crumbs [aria-current="page"] {
  font-weight: 600;
  color: var(--text);
}

@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover {
    color: var(--text);
    text-decoration-color: currentColor;
  }
}

.crumbs a:focus-visible {
  outline: 3px solid var(--cyan-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* English pages: the breadcrumb arrow points the way English reads */
html[dir="ltr"] .crumbs li + li::before { transform: rotate(-135deg); }