/* Small corrections on top of the captured stylesheet. */

/* The footer's legal row is a single non-wrapping flex line, which runs past
   the edge on the narrowest phones (a 320px screen scrolled sideways by 14px).
   Letting it wrap costs nothing at any other width. */
@media (max-width: 420px) {
  footer .flex,
  nav ~ div .flex.gap-6 {
    flex-wrap: wrap;
  }
}

/* The pointer dot is decorative and follows a mouse. Never on a touch screen. */
@media (hover: none), (pointer: coarse) {
  .mix-blend-difference {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Readability corrections.

   These are the one place this site deliberately departs from the original.
   The nav links are set at 40% black on white, which measures 2.5:1 against a
   4.5:1 minimum — legible on the designer's screen, not much use in daylight.
   The footer's legal row is worse at 25%, around 1.9:1.

   Only the opacity of the ink changes. Type, spacing, weight and layout are
   untouched, so it reads as the same design, just actually readable. Delete
   this block to go back to the original values exactly.
--------------------------------------------------------------------------- */
nav a.text-foreground\/40,
nav a.text-black\/40 {
  color: rgba(3, 2, 2, 0.72);
}
nav a.text-white\/50 {
  color: rgba(255, 255, 255, 0.82);
}
nav a.text-foreground\/60 {          /* mobile menu */
  color: rgba(3, 2, 2, 0.75);
}
footer a.text-black\/25,
footer a.text-foreground\/25 {
  color: rgba(3, 2, 2, 0.6);
}

/* ---------------------------------------------------------------------------
   Legibility floor.

   The captured design sets a lot of secondary text at 20–50% ink on white,
   which measures between 1.6:1 and 4.0:1 against a 4.5:1 readable minimum —
   eyebrow labels, captions, figure notes and footer text. On a designer's
   display it reads as restraint; on a phone in daylight it reads as nothing.

   Each step is lifted to the nearest value that clears the threshold while
   keeping the steps distinct from one another, so the hierarchy still reads
   as a hierarchy — 20% and 50% are still visibly different weights, both are
   now legible. 60% and above already passed and are untouched.

   Only ink on light backgrounds is affected. White-on-dark text is handled by
   its own classes and is left alone.
--------------------------------------------------------------------------- */
[class*="text-black/20"], [class*="text-foreground/20"] { color: rgba(3, 2, 2, 0.55); }
[class*="text-black/25"], [class*="text-foreground/25"] { color: rgba(3, 2, 2, 0.58); }
[class*="text-black/30"], [class*="text-foreground/30"] { color: rgba(3, 2, 2, 0.60); }
[class*="text-black/40"], [class*="text-foreground/40"] { color: rgba(3, 2, 2, 0.66); }
[class*="text-black/50"], [class*="text-foreground/50"] { color: rgba(3, 2, 2, 0.72); }

/* The nav manages its own two-state colouring; those rules sit above and must
   keep winning over the blanket ones here. */
nav a.text-white\/50 { color: rgba(255, 255, 255, 0.82); }