/* 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: 0; 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; }
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; }

/* Underlined actions use the rule and arrow as feedback, without a filled box. */
body :is(.terrain-link, .text-link, .footer-contact) {
  text-decoration: none;
  border-bottom-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: border-bottom-color 180ms ease, color 180ms ease;
}
body :is(.terrain-link, .text-link, .footer-contact):is(:hover, :focus-visible, :active) {
  background-color: transparent;
  box-shadow: none;
  border-bottom-color: currentColor;
}
body .site-footer button.footer-contact:is(:hover, :focus-visible) { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  body :is(.terrain-link, .text-link, .footer-contact) { transition: none; }
}

/* Mark arrow artwork explicitly so mail, social, and decorative icons stay still. */
body :is(a, button) :is(.action-arrow, span.project-arrow) {
  display: inline-block;
  transition: transform 180ms ease;
}
body :is(a, button):not(:disabled):is(:hover, :focus-visible) :is(.action-arrow, span.project-arrow) {
  transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
  body :is(a, button) :is(.action-arrow, span.project-arrow) { transition: none; }
  body :is(a, button):is(:hover, :focus-visible) :is(.action-arrow, span.project-arrow) { transform: none; }
}

/* Inline prose links change their underline, without a filled hit area. */
body :is(p, dd, blockquote) a,
body a.copy-inline-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
body :is(p, dd, blockquote) a:is(:hover, :focus-visible, :active),
body a.copy-inline-link:is(:hover, :focus-visible, :active) {
  background-color: transparent;
  box-shadow: none;
  text-decoration-thickness: 2px;
}