/* Owner decisions, 2026-10-19. Shared navigation; other muted text stays unchanged. */
.site-header .nav-work-link, .site-header .nav-info-menu a, .site-header .nav-social-link { color: #aaa; }
.site-header .nav-work-link.active, .site-header .nav-work-link:hover, .site-header .nav-info-menu a:hover,
.site-header .nav-info-menu a.active, .site-header .nav-social-link:hover { color: #fff; }
nav, body.resume-page nav, .site-header { background: linear-gradient(to bottom, rgba(8,8,8,.95), transparent); }
.nav-logo { appearance: none; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; text-align: left; }
.nav-logo:hover { opacity: 1; }
.nav-logo:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.nav-info-group[data-disclosure] .nav-info-menu { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.nav-info-group[data-disclosure].is-open .nav-info-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.nav-info-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.site-footer, .site-footer p, .site-footer a { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #090909; color: #fff; }
.site-footer p { margin: 0; }
.site-footer a { border-bottom: 1px solid transparent; text-decoration: none; transition: opacity .4s; }
.site-footer a:hover { opacity: .5; }
.site-footer a:hover, .site-footer a:focus-visible { border-bottom-color: #fff; }
@media (max-width: 640px) { .site-footer { flex-direction: column; text-align: center; } }
@media (max-width: 480px) { .contact-email { font-size: clamp(17px, 5.2vw, 25px); } }
@media (max-width: 640px) {
  .site-header .nav-info-trigger.nav-work-link { display: block; }
  .resume-role-header-row, .resume-earlier-row, .resume-edu-row { flex-wrap: wrap; gap: 8px 16px; }
  .resume-role-company, .resume-earlier-id, .resume-edu-id { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .resume-role-dates, .resume-earlier-dates, .resume-edu-year { white-space: normal; max-width: 100%; }
  .resume-role-title { overflow-wrap: anywhere; }
  .recommendations-title { overflow-wrap: anywhere; }
}
/* Stable photograph slots are present before requests; only decoded images appear. */
.photo-masonry-grid .work-item-image { aspect-ratio: var(--photo-ratio); overflow: hidden; background: transparent; }
.photo-masonry-grid .work-item-image img { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.photo-masonry-grid .work-item-image img.loaded { opacity: 1; }
.photo-masonry-grid .work-item-gallery-mark { opacity: 0; visibility: hidden; }
.photo-masonry-grid .work-item:has(img.loaded) .work-item-gallery-mark { opacity: 1; visibility: visible; }
/* Native modal fills the viewport, retaining the existing viewer appearance. */
dialog.work-lightbox { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; color: #fff; background: transparent; }
dialog.work-lightbox:not([open]) { display: none; }
dialog.work-lightbox::backdrop { background: rgba(0,0,0,.94); }
dialog.work-lightbox .work-lightbox-backdrop { background: transparent; }
@media (prefers-reduced-motion: reduce) { .photo-masonry-grid .work-item-image img { transition: none; } }

/* Approved photography viewer close control: half-size, half-brightness. */
dialog.work-lightbox .work-lightbox-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; padding: 0; border: 1px solid #fff; background: transparent; color: #fff; opacity: .5; cursor: pointer; }
dialog.work-lightbox .work-lightbox-close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; }
dialog.work-lightbox .work-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Shared case-study details use the approved type, navigation and gutter values. */
.work-detail, .component-case-study { --detail-gutter: 40px; }
.work-detail .work-meta { max-width: none; padding-left: var(--detail-gutter); padding-right: var(--detail-gutter); }
.work-detail .work-meta h1 { font-weight: 200; font-variation-settings: "wdth" 112.5, "GRAD" 0, "XTRA" 480; line-height: 1.2; overflow-wrap: anywhere; }
.work-detail .work-title-note { margin-left: 0; color: var(--fg-dim); }
.work-detail .work-meta-date, .work-detail .work-meta-tag,
.work-detail .work-compilation-source-notes > h2, .work-detail .work-nav a,
.work-detail .work-back { color: #aaa; }
.work-detail .work-meta-desc, .work-detail .work-meta-excerpt, .work-detail .work-source-note-copy { color: var(--fg-dim); }
.work-detail .work-role-note-link { color: var(--fg); }
.work-detail .work-nav { padding-left: var(--detail-gutter); padding-right: var(--detail-gutter); border-top-color: #303030; }
.work-detail .work-back { margin-top: 24px; }
.work-detail .work-back:hover, .work-detail .work-nav a:hover { color: var(--fg); }
.work-detail .work-back, .work-detail .work-nav a, .work-detail .work-role-note-link { border-bottom: 1px solid transparent; }
.work-detail .work-back:hover, .work-detail .work-back:focus-visible,
.work-detail .work-nav a:hover, .work-detail .work-nav a:focus-visible,
.work-detail .work-role-note-link:hover, .work-detail .work-role-note-link:focus-visible { border-bottom-color: var(--fg); }
.work-detail .work-back:focus-visible, .work-detail .work-nav a:focus-visible,
.work-detail .work-role-note-link:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.work-detail-video .work-hero-video.custom-video-player { margin-left: var(--detail-gutter); margin-right: var(--detail-gutter); }
.work-detail .custom-video-controls { grid-template-columns: 40px minmax(60px, 1fr) 92px auto; gap: 12px; padding: 4px 20px; color: #bdbdbd; }
.work-detail .custom-video-controls-no-audio { grid-template-columns: 40px minmax(60px, 1fr) auto; }
.work-detail .custom-video-toggle { width: 40px; height: 40px; min-width: 40px; border: 0; background: transparent; color: inherit; }
.work-detail .custom-video-toggle[data-state="pause"]::before { width: 16px; height: 16px; opacity: 1; }
.work-detail .custom-video-toggle[data-state="play"]::before { border-width: 8px 0 8px 14px; opacity: 1; }
.work-detail .custom-video-toggle:hover { color: #eee; }
.work-detail .custom-video-timeline, .work-detail .custom-video-volume { appearance: none; -webkit-appearance: none; height: 40px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #bdbdbd; opacity: 1; }
.work-detail .custom-video-timeline::-webkit-slider-runnable-track, .work-detail .custom-video-volume::-webkit-slider-runnable-track { height: 2px; border: 0; border-radius: 0; background: #505050; }
.work-detail .custom-video-timeline::-moz-range-track, .work-detail .custom-video-volume::-moz-range-track { height: 2px; border: 0; border-radius: 0; background: #505050; }
.work-detail .custom-video-timeline::-moz-range-progress, .work-detail .custom-video-volume::-moz-range-progress { height: 2px; background: #bdbdbd; }
.work-detail .custom-video-timeline::-webkit-slider-thumb, .work-detail .custom-video-volume::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 6px; height: 6px; margin-top: -2px; border: 0; border-radius: 50%; background: #ddd; }
.work-detail .custom-video-timeline::-moz-range-thumb, .work-detail .custom-video-volume::-moz-range-thumb { width: 6px; height: 6px; border: 0; border-radius: 50%; background: #ddd; }
.work-detail .custom-video-timeline:hover::-webkit-slider-thumb, .work-detail .custom-video-timeline:focus-visible::-webkit-slider-thumb,
.work-detail .custom-video-volume:hover::-webkit-slider-thumb, .work-detail .custom-video-volume:focus-visible::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -4px; }
.work-detail .custom-video-timeline:hover::-moz-range-thumb, .work-detail .custom-video-timeline:focus-visible::-moz-range-thumb,
.work-detail .custom-video-volume:hover::-moz-range-thumb, .work-detail .custom-video-volume:focus-visible::-moz-range-thumb { width: 10px; height: 10px; }
.work-detail .custom-video-timeline:disabled, .work-detail .custom-video-volume:disabled, .work-detail .custom-video-toggle:disabled { opacity: .35; cursor: default; }
.work-detail .custom-video-time { color: #bdbdbd; font-size: 12px; font-variant-numeric: tabular-nums; }
.work-detail .custom-video-toggle:focus-visible, .work-detail .custom-video-timeline:focus-visible,
.work-detail .custom-video-volume:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (min-width: 1400px) { .work-detail, .component-case-study { --detail-gutter: 80px; } }
@media (min-width: 1800px) { .work-detail, .component-case-study { --detail-gutter: 96px; } }
@media (max-width: 640px) {
  .work-detail, .component-case-study { --detail-gutter: 24px; }
  .work-detail .custom-video-controls { grid-template-columns: 40px minmax(0, 1fr) 92px; gap: 0 12px; padding: 0 12px; }
  .work-detail .custom-video-controls-no-audio { grid-template-columns: 40px minmax(0, 1fr); }
  .work-detail .custom-video-timeline { grid-column: 1 / -1; grid-row: 1; }
  .work-detail .custom-video-toggle { grid-column: 1; grid-row: 2; }
  .work-detail .custom-video-time { grid-column: 2; grid-row: 2; text-align: right; }
  .work-detail .custom-video-volume { grid-column: 3; grid-row: 2; }
}

/* Public component case study retains its gallery layout and shared title/gutters. */
.component-case-study { padding-left: var(--detail-gutter); padding-right: var(--detail-gutter); }
.component-case-study .review-header h1 { font-weight: 200; font-variation-settings: "wdth" 112.5, "GRAD" 0, "XTRA" 480; text-transform: none; overflow-wrap: anywhere; }