/* Shared interaction states; all font values remain in typography.css. */
a:focus-visible, button:focus-visible { outline:2px solid #262626; outline-offset:4px; border-radius:2px; }
body a.link-roll { color:#737373; text-decoration:none; max-width:100%; }
.link-roll-window { display:inline-grid; overflow:hidden; vertical-align:bottom; max-width:100%; }
.link-roll-window > span { grid-area:1/1; min-width:0; transition:transform 360ms cubic-bezier(.22,1,.36,1); }
.link-roll-window > span:last-child { transform:translateY(100%); }
body a.link-roll:focus-visible { color:#262626; }
a.link-roll:focus-visible .link-roll-window > span:first-child { transform:translateY(-100%); }
a.link-roll:focus-visible .link-roll-window > span:last-child { transform:translateY(0); }
body a.link-roll strong { color:inherit; }
body .case-footer a:hover strong { text-decoration:none; }
body .home-page .project-card, body.home-page .project-card, body.home-page .project-card * { text-decoration:none; }
body :is(a,button).inline-link:not(.link-roll) { color:inherit; text-decoration:underline; text-decoration-color:#b8b8b8; text-underline-offset:3px; text-decoration-thickness:1px; }
.inline-link > .external-cue { display:none; }
body :is(a,button).inline-link:not(.link-roll):focus-visible { color:#262626; text-decoration-color:currentColor; }
.link-notice { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.external-cue { white-space:nowrap; }
.stack-logo a { position:relative; }
.stack-logo .external-cue { position:absolute; right:2px; bottom:0; }
@media(hover:hover) {
 body a.link-roll:hover { color:#262626; }
 a.link-roll:hover .link-roll-window > span:first-child { transform:translateY(-100%); }
 a.link-roll:hover .link-roll-window > span:last-child { transform:translateY(0); }
 body :is(a,button).inline-link:not(.link-roll):hover { color:#262626; text-decoration-color:currentColor; }
}
@media(prefers-reduced-motion:reduce), (hover:none) {
 .link-roll-window > span { transition:none; }
 .link-roll-window > span:last-child { display:none; }
 a.link-roll:is(:hover,:focus-visible) .link-roll-window > span:first-child { transform:none; }
}
.case-footer .link-roll-window > span { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.case-footer .link-roll-window > span > span { color:#737373; }
@media(hover:none) {
 .project-thumbnail:hover { opacity:1; }
}

/* Vector arrows retain plain strokes in Safari, independent of emoji fonts. */
.link-arrow { display:inline-block; width:1em; height:1em; vertical-align:-.125em; flex-shrink:0; }