/* Portfolio palette: white typography, orange emphasis and navigation. */
:root { --paper: #fff; --muted: #fff; --orange: #ff732d; }
::selection { background: var(--orange); color: #fff; }

/* A quiet dark veil blends the navigation into the page. */
.nav.category-header {
  background: linear-gradient(180deg, #19181780, #19181726);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: transparent;
}
.category-header nav b { font-size: 16px; font-weight: 500; line-height: 1.4; }
.category-header nav span { font-size: 11px; line-height: 1.4; }
.category-header nav a,
.category-header nav a span { color: #fff; }
.category-header nav a:hover,
.category-header nav a:hover span,
.category-header > button span { color: #fff; }
.category-header nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
@media(max-width:700px) {
  .category-header nav b { font-size: 14px; }
  .category-header nav span { font-size: 10px; }
}

/* Filled actions share the same orange surface and white labels. */
.pill, .pill:hover,
.card-open,
.carousel-top button, .carousel-top button:hover,
.home-link,
.back-top,
.category-directory a, .category-directory a:hover,
.close {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.pill span, .back-top span, .category-directory a span { color: #fff; }
.home-link { padding: 10px 17px; border-radius: 24px; }
.back-top { padding: 18px 22px; border-radius: 30px; gap: 20px; }
.pill:hover, .home-link:hover, .back-top:hover, .category-directory a:hover {
  box-shadow: 0 6px 25px #ff732d40;
}
.contact-links > a, .contact-links > a:hover { color: var(--orange); }
.contact-links > a span { color: #fff; }
.arc-card span { background: var(--orange); color: #fff; }
.dots button, .page-index a { background: var(--orange); opacity: .45; }
.dots button.active, .page-index a.active { opacity: 1; }

/* Keep toolkit lettering inside the site's white/orange type palette. */
.skill-item .tool-icon { color: #fff; }
.skill-item .tool-icon.jy { background: #2c2927; }
.skill-item:hover .tool-icon { color: var(--orange); }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }