/* One-time reveals are driven by motion.js; content never depends on animation. */
#experience .role { position: relative; padding-left: 26px; border-left: 1px solid var(--line); }
#experience .role::before { content: ''; position: absolute; left: -5px; top: 35px; width: 9px; height: 9px; border-radius: 50%; background: #276974; }
#experience .role:first-child::before { top: 8px; }
.project-media a { cursor: zoom-in; }
.button { transition: background-color .2s ease, color .2s ease; }
.lightbox-open { overflow: hidden; }
.project-lightbox { width: min(1100px, 94vw); max-height: 92dvh; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.project-lightbox::backdrop { background: rgb(10 25 38 / 80%); }
.lightbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.lightbox-toolbar h2 { margin: 0; font-size: 1.125rem; }
.lightbox-toolbar button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 4px; background: white; font: inherit; color: var(--ink); cursor: pointer; }
.lightbox-toolbar button:focus-visible { outline: 3px solid #276974; outline-offset: 3px; }
.project-lightbox img { width: 100%; height: auto; max-height: 68dvh; object-fit: contain; display: block; }
.lightbox-caption { color: var(--muted); font-size: .875rem; margin: 12px 0 0; }
@media (max-width: 640px) { .project-lightbox { padding: 14px; } #experience .role { padding-left: 20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }
@media print { .project-lightbox { display: none; } }