Now style the links and give every control a keyboard focus ring. Two blocks join style.css; nothing above them changes.

The inline link

.text-link {
  color: var(--accent);
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

At rest the credit link is the accent colour with no underline; on hover the underline appears. This is a deliberate, common choice — and, as the theory warned, at rest it leans entirely on colour. It's defensible for a single credit line in an obvious spot; it would be the wrong call for links scattered through body text, where you'd underline them always. The point is that this is a call, and now you know what you're trading.

One focus ring for everything interactive

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

One rule names every interactive element the page has or will have — links, buttons, and the form fields that come later — so they all share the same clear keyboard focus ring. Two things make it correct:

• :focus-visible, not :focus — so the ring shows for keyboard users and doesn't flash on every mouse click.
• outline-offset: 2px — the ring sits 2px off the control, on the page behind it, where it's clearly visible. On the accent-coloured .skip-link this matters most: a ring painted directly on an accent background would be accent-on-accent — invisible. Lifting it onto the page keeps it readable.

Test it the honest way: click into the page, then press Tab. As focus lands on the brand, each nav link, the credit link and each card's favourite button, you should see a crisp ring step through them. Then click one with the mouse — no ring. That gap between click and Tab is :focus-visible doing its job.