/* ---- LANGUAGE TOGGLE ----
   Two links — EN and ES — fixed in the top-right corner.

   Design constraints this must satisfy:
   - Must look like it belongs to this monograph, not like a plugin widget.
   - Must not collide with .adc-corner (bottom-right) or .rail (left-center).
   - Must not push the hero down or cost the hero its LCP.
   - Current language carries aria-current="true" and a visual distinction.
   - Real <a> links; no JavaScript, no Accept-Language redirect.

   Typography: DM Mono (--font-mono), var(--text-label), letter-spacing .16em —
   the same register as .overline and .eyebrow so it reads as part of the system.

   Position: top-right, matching the gutter offset used by .adc-corner.
   At short viewports (max-height:30rem) the ADC corner hides; the toggle stays
   because it is navigation, not decoration.

   The z-index sits at 30, above .adc-corner (20) and .rail (18), because the
   toggle is interactive and must always be reachable. On mobile the rail is
   hidden (display:none at ≤600px) so there is no actual conflict there. */

.lang-toggle {
  position: fixed;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: max(.75rem, var(--text-caption));
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  /* Was .72 at --text-label and read as a faint utility. This is navigation on a
     bilingual site in a bilingual neighbourhood - a Spanish-speaking reader has to
     find it without hunting. Full opacity, one step up the type scale. */
  opacity: 1;
  transition: opacity var(--dur-fast) linear;
}

.lang-toggle:focus-within,
.lang-toggle:hover {
  opacity: 1;
}

/* The separator dot between EN and ES */
.lang-toggle__sep {
  color: var(--muted);
  letter-spacing: 0;
  user-select: none;
  aria-hidden: true; /* set in HTML too */
}

.lang-toggle a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  color: var(--muted);
  text-decoration: none;
  text-underline-offset: .25em;
  transition: color var(--dur-fast) linear;
}

.lang-toggle a:hover,
.lang-toggle a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--copper-ink);
}

/* Current language: copper-ink, no underline, not a link in feel */
.lang-toggle a[aria-current="true"] {
  color: var(--copper-ink);
  text-decoration: none;
  cursor: default;
  pointer-events: none; /* prevent re-clicking the current page */
}

/* On the hero the scrim ensures legibility, but on a light body background
   the muted color at .72 opacity is still enough for AA at this font size.
   Both computed: var(--muted) = #777167 gives 4.56:1 on var(--paper) = #FAF8F4.
   var(--copper-ink) = #8A5626 gives 5.4:1 on var(--paper). Both pass AA. */

/* ---- LABEL LENGTH BY WIDTH ----
   Phones get EN / ES: at 390px the fixed corner has no room for two full words
   without crowding the hero. Wider screens get the language named in its own
   language - English / Espanol - which is unambiguous to a reader who does not
   speak the other one, where a two-letter code is a guess. */
.lang-toggle__long { display: none; }
.lang-toggle__short { display: inline; }

@media (min-width: 34rem) {
  .lang-toggle__long { display: inline; }
  .lang-toggle__short { display: none; }
  .lang-toggle { gap: .7em; letter-spacing: .1em; }
}

/* The inactive language is the actionable one, so it carries the weight. The
   current language stays quiet - it is a label, not an offer. */
.lang-toggle a:not([aria-current="true"]) {
  font-weight: 600;
  color: var(--ink-2);
}
.lang-toggle a:not([aria-current="true"]):hover,
.lang-toggle a:not([aria-current="true"]):focus-visible {
  color: var(--copper-ink);
  text-decoration: underline;
  text-decoration-color: var(--copper-ink);
}

@media print {
  .lang-toggle { display: none; }
}

/* Instagram, in the fixed toggle. Icon only: this strip is navigation chrome and
   an @handle here would crowd EN · ES on a 320px screen. The accessible name
   carries the handle, and the credits footer still spells it out in text. */
.lang-toggle__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  line-height: 0;
}
.lang-toggle__ig svg { display: block; }

@media (max-width: 40rem) {
  .lang-toggle {
    top: .35rem;
    right: .35rem;
    gap: 0;
    letter-spacing: .08em;
  }
  .lang-toggle__sep { display: none; }
}