@charset "UTF-8";
/* The image is fitted first, then translated and scaled within a bounded stage. */
.lightbox { width:min(1440px,96vw); max-width:96vw; max-height:96svh; padding:0; background:#101d17; color:#edf2e5; border:1px solid #dce9cd33; border-radius:12px; overflow:auto; }
.lightbox::backdrop { background:#021009e6; backdrop-filter:blur(8px); }
.viewer-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 18px; border-bottom:1px solid #e8f3dd20; }
.viewer-zoom { display:flex; align-items:center; gap:8px; }
.viewer-zoom button,.lightbox-close { display:grid; place-items:center; min-width:38px; height:38px; border:1px solid #dae8cd40; border-radius:5px; background:#ffffff08; color:inherit; cursor:pointer; }
.viewer-zoom button:disabled { opacity:.35; cursor:default; }
.viewer-zoom button:hover:not(:disabled),.lightbox-close:hover { background:#d8ed8d; color:#13251a; }
#zoom-in,#zoom-out { font-size:21px; }
#zoom-level { min-width:50px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
#zoom-reset { font-size:11px; padding-inline:12px; }
.viewer-toolbar .lightbox-close { position:static; font-size:27px; line-height:1; }
.lightbox-layout { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:12px; align-items:center; padding:12px 14px 18px; }
.lightbox-figure { min-width:0; width:100%; margin:0; text-align:center; }
#lightbox-stage { width:100%; height:min(68svh,760px); overflow:hidden; display:grid; place-items:center; background:#0003; border-radius:5px; }
#lightbox-stage:focus-visible { outline:2px solid #d8ed8d; outline-offset:3px; }
#lightbox-stage #lightbox-image { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; transform:translate(var(--viewer-x,0px),var(--viewer-y,0px)) scale(var(--viewer-scale,1)); transform-origin:center; touch-action:none; user-select:none; transition:none; }
#lightbox-caption { font-size:12px; line-height:1.7; margin:13px 0 0; color:#eff2e7; padding:0; }
.viewer-hint { font-size:10px; color:#b7c8ad; margin:5px 0 8px; }
.lightbox-original { color:#def38d; font-size:11px; }
.lightbox-prev,.lightbox-next { width:40px; height:46px; border-radius:5px; border:1px solid #dce9cd40; background:transparent; color:#eef2e6; font-size:23px; cursor:pointer; }
.lightbox-prev:hover,.lightbox-next:hover { color:#16321d; background:#d8ed8d; }
.lightbox button:focus-visible,.lightbox a:focus-visible { outline:2px solid #d8ed8d; outline-offset:3px; }
.compact-heading > div .eyebrow { margin-bottom:12px; }
.detail-tabs button { border:0; padding:0; background:none; font:inherit; cursor:pointer; }
.text-button { display:inline-flex; align-items:center; gap:9px; background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer; }
.resume-card .button svg { width:18px; height:18px; }
@media(max-width:760px) {
  .lightbox { width:100vw; max-width:100vw; max-height:100svh; border-radius:0; }
  .viewer-toolbar { gap:8px; padding:10px 12px; }
  .viewer-zoom { gap:4px; }
  .viewer-zoom button { min-width:34px; height:36px; }
  #zoom-reset { padding-inline:8px; font-size:10px; }
  #zoom-level { min-width:44px; font-size:11px; }
  .lightbox-layout { grid-template-columns:28px minmax(0,1fr) 28px; gap:4px; padding:8px 4px 18px; }
  #lightbox-stage { height:60svh; }
  .lightbox-prev,.lightbox-next { width:28px; height:40px; font-size:17px; }
  #lightbox-caption { font-size:10px; }
  .viewer-hint { font-size:8px; }
  .compact-heading > div .eyebrow { margin-bottom:10px; }
}
