/* Tufte-inspired navigation feedback.
   Uses the existing ET Book font, sizes, letter-spacing, and layout unchanged. */

.menu li a {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: auto;
    transition: text-decoration-color 180ms ease, opacity 180ms ease;
}

/* An understated underline appears when the link is hovered. */
.menu li a:hover {
    text-decoration-color: currentColor;
}

/* Momentary feedback on click without changing the font. */
.menu li a:active {
    opacity: 0.7;
}

/* Remove the browser rectangle for pointer clicks only. */
.menu li a:focus:not(:focus-visible) {
    outline: none;
}

/* Keyboard users still get a clear, font-matched focus indicator. */
.menu li a:focus-visible {
    outline: none;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .menu li a {
        transition: none;
    }
}

/* Elegant focus feedback for ALL links, including post titles and inline links.
   The original Hugo-Tufte :focus outline creates a rectangle after clicking.
   Do not change ET Book, font sizes, letter spacing, layout, or resting link style. */
a:focus {
    outline: none;
}

/* Visible keyboard focus without a rectangle. */
a:focus-visible {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: auto;
}

/* If a link wraps an image, the keyboard focus still needs to be visible. */
a:focus-visible img {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Small press feedback for article titles and text listings. */
.page-list .content-title a,
.list-page a {
    transition: opacity 160ms ease;
}

.page-list .content-title a:active,
.list-page a:active {
    opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
    .page-list .content-title a,
    .list-page a {
        transition: none;
    }
}