/* Targeted navigation, readability, and keyboard support. */
:focus-visible { outline: 3px solid #FF1A00 !important; outline-offset: 5px; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:20000; padding:12px 18px; background:#E1FF00; color:#000; font:700 14px sans-serif; }
.skip-link:focus { top:16px; }
.hero-work-link { display:inline-block; padding:12px 18px; border:1px solid #E1FF00; color:#fff; font:700 14px 'Space Mono',monospace; letter-spacing:.04em; }
.hero-work-link:hover { background:#E1FF00; color:#000; }
.hero-gallery-links { display:flex; flex-wrap:wrap; gap:4px 18px; max-width:740px; margin-top:6px; }
.hero-gallery-links a { color:#fff; text-decoration:underline; text-underline-offset:4px; font:13px/1.5 'Inter',sans-serif; padding:7px 0; }
.hero-gallery-links a:hover { color:#E1FF00; }
section[id], .project-group[id], #gallery-work { scroll-margin-top:85px; }
.gallery-item:focus-visible .gallery-item-overlay { opacity:1; }
.gallery-item:focus-visible .expand-icon { opacity:1; }
#lightbox { box-sizing:border-box; color:#fff; }
#lightbox button, #lightbox-caption { color:#fff !important; }
#lightbox-counter { color:#bbb !important; }
.project-group-desc { font-family:'Inter',sans-serif; font-size:14px; letter-spacing:0; line-height:1.65; color:#444; max-width:420px; text-align:left; }
.page-header p { font-size:14px; color:#444; }
@media(max-width:768px) {
  .project-group-desc { display:block !important; max-width:none !important; }
  .project-group-header { flex-wrap:wrap; }
  .project-group-desc { flex-basis:100%; }
  #hero-text-block { gap:10px !important; }
  #hero-cta-resume, .hero-work-link { font-size:12px !important; padding:12px 14px !important; }
  #contact > div > a, #contact > div > div { padding:22px 16px !important; gap:12px !important; }
  #education > div > div { padding:24px 16px !important; gap:12px !important; }
  #education > div > div > div > div { overflow-wrap:anywhere; }
}
@media(max-width:420px) {
  #skills .skill-tag { letter-spacing:0 !important; padding:10px 8px !important; font-size:11px !important; }
  #hero-tagline { max-width:38ch; }
  .hero-gallery-links { gap:0 14px; }
  .hero-gallery-links a { font-size:12px; }
}
@media(max-height:600px) and (max-width:900px) {
  #hero { min-height:600px; }
}