/* ENLACES DEL MENÚ · iguales en todas las páginas, como en la portada sobre Work:
   14 px, blancos al 70 % (blancos del todo al pasar el ratón), 32 px entre enlaces y el último a 24 px del borde derecho
   (14 px en móvil). La página en la que estás lleva el enlace subrayado (aria-current="page" en el HTML).
   Los enlaces miden toda la altura de la barra, así el texto queda siempre centrado en vertical.
   Lo usan About, Privacy, los proyectos y The room (en los proyectos la barra se mezcla con "difference": ver css/case.css). */
.nav, .case-nav { padding: 0 var(--bar-gutter); }
.nav-links, .case-nav ul { display: flex; align-self: stretch; gap: 0; margin: 0 -16px 0 auto; list-style: none; }
.nav-links a, .case-nav a {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 16px;
  color: rgba(255, 255, 255, .7);
  font-size: var(--fs-s);
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  text-shadow: none;
  opacity: 1;
  transition: color .2s;
}
.nav-links a:hover, .case-nav a:hover { color: #fff; text-decoration: none; }
.nav-links a[aria-current="page"], .case-nav a[aria-current="page"] {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* MIGAS DE PAN · «Home / About», en la barra, a la derecha del tomate (solo en las páginas verdes de un nivel; los proyectos ya tienen su nombre y el botón de volver).
   Heredan el color del texto de la página (lima): el actual va entero y el resto al 80 % (5,1:1 sobre el verde). */
.crumbs { position: fixed; z-index: 9; top: 0; left: calc(var(--bar-gutter) + 44px + 16px); height: var(--nav-h); display: flex; align-items: center; font-size: var(--fs-s); line-height: var(--lh-ui); color: inherit; }
.crumbs ol { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin: 0 .6em; opacity: .6; }
.crumbs a { display: flex; align-items: center; height: var(--nav-h); color: inherit; opacity: .8; text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: opacity .2s; }
.crumbs a:hover, .crumbs a:focus-visible { opacity: 1; text-decoration: underline; }

@media (max-width: 700px) {
  .nav-links, .case-nav ul { margin-right: -7px; }
  .nav-links a, .case-nav a { padding: 0 7px; }
  .crumbs { left: calc(var(--bar-gutter) + 36px + 12px); }
}
/* En los proyectos, el móvil también lleva los enlaces (antes solo se veía el tomate) */
@media (max-width: 760px) { .case-nav { display: flex; } }