/* One interaction vocabulary: a quiet fill on hover, plus an outline on focus. */
:root { --interaction-fill: #e0e9ed; --interaction-ring: #315b6c; }
.site-header, .site-footer, .hero { --interaction-fill: #ffffff24; --interaction-ring: #fff; }
a, button, summary { -webkit-tap-highlight-color: #315b6c33; transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease; }
body a:hover, body button:hover, body summary:hover { background-color: var(--interaction-fill); }
body a:focus-visible, body button:focus-visible, body summary:focus-visible { background-color: var(--interaction-fill); outline: 2px solid var(--interaction-ring); outline-offset: 4px; }
body a:active, body button:active, body summary:active { box-shadow: inset 0 0 0 2px var(--interaction-ring); }
/* Navigation retains its shared sliding underline rather than adding text decoration. */
body .page-nav > a, body .page-nav > button { text-decoration: none; }
body .page-nav > a:focus-visible, body .page-nav > button:focus-visible { outline-offset: -4px; }
/* Links that are already underlined retain that cue. Tile links all use the same fill. */
.personal .interest-links a:is(:hover,:focus-visible),
.personal .project-row:is(:hover,:focus-visible),
.personal .social-list a:is(:hover,:focus-visible) { background-color: var(--interaction-fill); color: #243d3f; text-decoration: none; box-shadow: inset 0 0 0 1px #315b6c50; }
.personal .interest-links a:focus-visible,
.personal .project-row:focus-visible,
.personal .social-list a:focus-visible { outline: 2px solid var(--interaction-ring); outline-offset: 4px; }
/* Contact actions are unadorned at rest, with identical feedback on every row. */
#contact-dialog .contact-links { gap: 4px; }
#contact-dialog .contact-links a { padding: 16px; margin-inline: -16px; border: 0; border-radius: 8px; color: var(--ink); text-decoration: none; background: transparent; }
#contact-dialog .contact-links a:is(:hover,:focus-visible) { background: var(--interaction-fill); color: var(--ink); }
body .dialog-close { border-radius: 8px; }
/* Footer text links use underlines; the audio button retains a filled highlight. */
body .site-footer :is(a,button):is(:hover,:focus-visible,:active) { background-color: transparent; box-shadow: none; }
body .site-footer :is(a,button):not(.footer-brand,.footer-music):is(:hover,:focus-visible) { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
body .site-footer .footer-music:is(:hover,:focus-visible,:active) { background-color: var(--interaction-fill); }
body .footer-contact:hover { color: inherit; }
/* Image links need a visible cue that is not hidden beneath the image. */
body .hero-portrait:is(:hover,:focus-visible) { box-shadow: 0 0 0 3px var(--interaction-ring); }
body .music-track:is(:hover,:focus-visible) { outline: 2px solid var(--interaction-ring); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { a, button, summary { transition: none; } }
@media (forced-colors: active) {
  body a:hover, body button:hover, body summary:hover { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Preserve contrast for the dark return button over the 404 landscape. */
.not-found .return-home:is(:hover,:focus-visible) { background: #244f70; color: #fff; }
/* The header uses underline feedback, without background highlights. */
body .single-row-header .page-nav > :is(a,button):is(:hover,:focus-visible,:active) { background-color: transparent; }
body .single-row-header .brand:is(:hover,:focus-visible,:active) { background-color: transparent; box-shadow: none; }
body .single-row-header .brand:hover:not(:focus-visible) { outline: none; }
/* The footer monogram stays unadorned on hover; keyboard focus remains visible. */
body .footer-brand:hover:not(:focus-visible) { background-color: transparent; box-shadow: none; outline: none; }

/* Keep autofocus for accessibility, but only paint focus after keyboard input. */
html[data-input-mode="pointer"] body .dialog-close:focus { outline: none; box-shadow: none; }
html[data-input-mode="pointer"] body .dialog-close:focus:not(:hover) { background-color: transparent; }
html[data-input-mode="keyboard"] body .dialog-close:focus { background-color: var(--interaction-fill); outline: 2px solid var(--interaction-ring); outline-offset: 4px; }