/* Cross-page navigation strip. One component, three brand skins.
   All colours resolve through the host page's HSL variables. */

.crossnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px clamp(20px, 5vw, 56px);
  border-bottom: 1px solid transparent;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.crossnav-mark {
  font-weight: 700;
  letter-spacing: 0.22em;
}

.crossnav-links {
  display: flex;
  gap: clamp(14px, 3vw, 30px);
}

.crossnav a {
  text-decoration: none;
  opacity: 0.68;
  transition: opacity 0.15s ease;
}

.crossnav a:hover,
.crossnav a[aria-current='page'] {
  opacity: 1;
}

.crossnav a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Hub: warm bone paper */
.crossnav--hub {
  background: hsl(var(--hub-paper-soft));
  border-color: hsl(var(--hub-line-faint));
  color: hsl(var(--hub-ink-soft));
}
.crossnav--hub .crossnav-mark {
  color: hsl(var(--hub-accent));
}
.crossnav--hub a[aria-current='page'] {
  text-decoration-color: hsl(var(--hub-accent));
}

/* Yendra: dark maritime ground */
.crossnav--yendra {
  background: hsl(var(--yn-ground));
  border-color: hsl(var(--yn-rule-soft));
  color: hsl(var(--yn-ink-2));
}
.crossnav--yendra .crossnav-mark {
  color: hsl(var(--yn-amber));
}
.crossnav--yendra a[aria-current='page'] {
  color: hsl(var(--yn-ink));
  text-decoration-color: hsl(var(--yn-amber));
}

/* Ukashula: field-paper green */
.crossnav--ukashula {
  background: hsl(var(--uk-paper));
  border-color: hsl(var(--uk-rule));
  color: hsl(var(--uk-ink-2));
}
.crossnav--ukashula .crossnav-mark {
  color: hsl(var(--uk-field));
}
.crossnav--ukashula a[aria-current='page'] {
  color: hsl(var(--uk-ink));
  text-decoration-color: hsl(var(--uk-field));
}

/* Archive: same bone paper as the hub, oxblood current marker */
.crossnav--archive {
  background: hsl(var(--ar-paper-soft, 40 24% 90%));
  border-color: hsl(var(--ar-line-faint, 40 12% 84%));
  color: hsl(var(--ar-ink-soft, 30 6% 40%));
}
.crossnav--archive .crossnav-mark {
  color: hsl(var(--ar-accent, 0 55% 32%));
}
.crossnav--archive a[aria-current='page'] {
  color: hsl(var(--ar-ink, 30 8% 12%));
  text-decoration-color: hsl(var(--ar-accent, 0 55% 32%));
}