:root { color-scheme: light dark; }
*:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

html, body { height: 100%; }
body { display: flex; flex-direction: column; }

/* === Nav links === */
.nav-link {
    padding: 0.5rem 0.875rem;
    border-radius: 0.375rem;
    color: rgb(71 85 105);
    transition: color 0.15s, background-color 0.15s;
}
.nav-link:hover { color: rgb(15 23 42); background: rgb(241 245 249); }
.nav-link-active { color: rgb(37 99 235); background: rgb(239 246 255); font-weight: 600; }
.dark .nav-link { color: rgb(148 163 184); }
.dark .nav-link:hover { color: rgb(241 245 249); background: rgb(30 41 59); }
.dark .nav-link-active { color: rgb(96 165 250); background: rgb(30 58 138 / 0.3); }

/* === Floating tech logos background === */
#bg-logos {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.bg-logo {
    position: absolute;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.bg-logo-inner {
    display: block;
    animation: bgDrift var(--dur, 12s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
.bg-logo img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .1;
    filter: invert(0);
    transform: rotate(var(--rot, 0deg));
}
:root:not(.dark) .bg-logo img { filter: invert(1); opacity: .1; }
.dark .bg-logo img { opacity: .22; }

@keyframes bgDrift {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(8px, -10px); }
    50%      { transform: translate(-6px, 8px); }
    75%      { transform: translate(10px, 4px); }
}
@media (prefers-reduced-motion: reduce) { .bg-logo-inner { animation: none; } }

/* lift content above bg layer */
body > header, body > main, body > footer { position: relative; z-index: 10; }

/* === Photo slash overlay === */
.photo-slash {
    position: absolute;
  /*  inset: 0; */
    clip-path: polygon(0 52%, 100% 58%, 100% 100%, 0 100%);
    opacity: .62;
}
.connector-notch {
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
}

/* === Bullet list === */
.bio-list { padding-left: 0; }
.bio-list li {
    position: relative;
    padding-left: 1.25em;
    line-height: 1.5;
}
.bio-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    opacity: .55;
}