/* ══════════════════════════════════════════════════════════════════════
   lang.css — the language switch, and only that

   Its own file because it has to reach pages this build no longer writes:
   the three trip pages are hand-authored now, so the link to this sheet is
   injected into every page's <head> rather than listed in a template.

   It reads as a control, not as a fifth place to go. The nav's other links
   are bare tracked caps; a box around two letters is the cheapest way to
   say "this changes the page you are on" instead of "this is a page".
   ══════════════════════════════════════════════════════════════════════ */

.nav .lang{
  /* .home already carries margin-right:auto, so the page links sit as one
     group at the right. This pushes the switch off the end of that group —
     it belongs to the page, not to the list of pages. */
  margin-left:clamp(10px,1.6vw,20px);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:23px;padding:0 8px;
  border:1px solid color-mix(in srgb,var(--body) 34%,transparent);
  border-radius:2px;
  font-family:var(--mono),var(--sans),sans-serif;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body);text-decoration:none;
  /* the nav's own rule underlines every link on hover; this one inverts
     instead, so it cannot be mistaken for one of the destinations */
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.nav .lang:hover,
.nav .lang:focus-visible{
  background:var(--body);
  border-color:var(--body);
  color:var(--page);
  text-decoration:none;
}
.nav .lang span{display:block;line-height:1}

/* The phone nav wraps to two rows and the right-hand padding that keeps
   the desktop nav clear of the Reservar pill is gone there, so the switch
   stops being pushed off the end and just joins the second row. */
@media(max-width:640px){
  .nav .lang{margin-left:auto;height:21px;min-width:31px;padding:0 7px;font-size:9.5px}
}