/* Frequent actions are brief; keyboard actions are instant. */
:root { --ease-out: cubic-bezier(.23,1,.32,1); }
html { scrollbar-gutter: stable; }
a, button { touch-action: manipulation; }
main:focus { outline: none; }
.header { transition: none; }
.button, .menu-toggle, .close-menu, .preview-note button {
  transition: transform 140ms var(--ease-out);
}
.button { --rest-bg: var(--wine); --rest-text: var(--sand); }
.button.outline { --rest-bg: transparent; --rest-text: var(--ink); }
.button.light { --rest-bg: var(--sand); --rest-text: var(--wine); }
.button.outline.light { --rest-bg: transparent; --rest-text: var(--sand); }
/* Reset legacy hover/focus effects, then enable hover only for a mouse. */
.button, .button:hover, .button:focus-visible,
.button.outline:hover, .button.outline:focus-visible,
.button.light:hover, .button.light:focus-visible,
.button.outline.light:hover, .button.outline.light:focus-visible {
  background: var(--rest-bg); color: var(--rest-text);
}
.button::before, .button:hover::before, .button:focus-visible::before {
  transform: translateY(102%);
  transition: transform 200ms var(--ease-out);
}
.button:focus-visible::before { transition: none; }
.button span:last-child, .circle-arrow, .back-link span, .text-link span, .back-top span {
  transition: transform 180ms var(--ease-out);
}
.cover-title, .project-cover::after { transition: none; }
.project-card a:hover .cover-title, .project-card a:hover .project-cover::after { transform: none; }
.project-card a { outline-offset: 8px; }
.project-card a:active .circle-arrow { transform: scale(.94); }
.desktop-nav a::after { transition: none; }
.desktop-nav a, .text-link, .back-link, .back-top { text-underline-offset: 5px; text-decoration-thickness: 1px; }
.menu-toggle, .close-menu, .preview-note button { min-width: 44px; min-height: 44px; }
dialog { overscroll-behavior: contain; transform-origin: center; }
dialog nav a { min-height: 44px; }
[data-preview-hidden] .preview-note { display: none; }
@media (hover:hover) and (pointer:fine) {
  .button:hover, .button.outline:hover, .button.light:hover, .button.outline.light:hover {
    background: var(--olive); color: var(--sand);
  }
  .button:hover::before { transform: translateY(0); }
  .button:hover span:last-child { transform: translate(2px,-2px); }
  .project-card a:hover .circle-arrow { transform: translate(2px,-2px); }
  .back-link:hover span { transform: translateX(-3px); }
  .text-link:hover span { transform: translate(2px,-2px); }
  .back-top:hover span { transform: translateY(-3px); }
  .desktop-nav a:hover, .text-link:hover, .back-link:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion:no-preference) {
  html:not([data-input="keyboard"]) .button:active,
  html:not([data-input="keyboard"]) .menu-toggle:active,
  html:not([data-input="keyboard"]) .close-menu:active,
  html:not([data-input="keyboard"]) .preview-note button:active { transform: scale(.97); }
}
html[data-input="keyboard"] { scroll-behavior: auto; }
html[data-input="keyboard"] *, html[data-input="keyboard"] *::before, html[data-input="keyboard"] *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important;
}
html[data-input="keyboard"] .button:active,
html[data-input="keyboard"] .project-card a:active .circle-arrow { transform: none; }
@media (prefers-reduced-motion:reduce) {
  .button::before { display: none; }
  .button span:last-child, .circle-arrow, .back-link span, .text-link span, .back-top span { transform: none !important; }
}
.preview-note { bottom: max(14px, env(safe-area-inset-bottom)); }
@media(max-width:800px) { dialog { padding-bottom: max(26px, env(safe-area-inset-bottom)); } }