/* Work previews live outside the clipped opening scene and never capture clicks. */
@property --work-art-ratio { syntax: '<number>'; inherits: true; initial-value: .666667; }
@property --work-preview-grow { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --work-mat-ratio { syntax: '<number>'; inherits: true; initial-value: .065; }
#ning-water-garden .ng-project-toggle .ng-title { justify-self: start; }
.work-hover, .work-zoom {
  --outer-ratio: calc((1 - .14 - var(--work-mat-ratio) * 2) * var(--work-art-ratio) + .14 + var(--work-mat-ratio) * 2);
  --frame-width: calc(var(--preview-size) * .07);
  --well-inset: calc(var(--frame-width) - 1px);
  --art-inset: calc(var(--preview-size) * var(--work-mat-ratio));
  --art-width: calc(var(--preview-size) - var(--well-inset) * 2 - var(--art-inset) * 2);
  --art-height: calc(var(--art-width) * var(--work-art-ratio));
  --frame-height: calc(var(--art-height) + var(--well-inset) * 2 + var(--art-inset) * 2);
}
.work-hover {
  --preview-size: min(calc(clamp(300px, 27vw, 365px) * var(--work-preview-grow)), calc(100vw - 40px), calc((100svh - 88px) / var(--outer-ratio)));
  position: fixed;
  top: 0;
  left: 0;
  width: var(--preview-size);
  z-index: 20;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 320ms;
}
.work-hover.is-visible {
  visibility: visible;
  /* One shared easing keeps the frame, its mat and the sliding art together. */
  transition: visibility 0s,
    --work-art-ratio 520ms cubic-bezier(.22,.7,.2,1),
    --work-preview-grow 520ms cubic-bezier(.22,.7,.2,1),
    --work-mat-ratio 520ms cubic-bezier(.22,.7,.2,1);
}
.work-hover-card {
  overflow: visible;
  filter: drop-shadow(0 18px 24px #0008);
  opacity: 0;
  transform: scale(.08);
  transform-origin: center;
  transition: opacity 160ms ease 140ms, transform 320ms cubic-bezier(.55,.05,.7,.4);
}
.work-hover.is-visible .work-hover-card {
  opacity: 1;
  transform: scale(1);
  transition: opacity 170ms ease, transform 420ms cubic-bezier(.16,1,.3,1);
}
.work-hover-frame {
  position: relative;
  height: var(--frame-height);
}
.work-hover-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--frame-width) solid transparent;
  border-image-source: url('assets/ornate-work-frame.webp');
  border-image-slice: 20.5%;
  border-image-repeat: stretch;
  pointer-events: none;
}
.work-hover-viewport {
  position: absolute;
  inset: var(--well-inset);
  overflow: hidden;
  background: linear-gradient(115deg, #0002, #0000 45%, #0004), url('assets/black-velvet-backing.webp') center / cover, #080909;
  box-shadow: inset 0 0 16px 4px #000b;
}
.work-hover-aperture {
  position: absolute;
  inset: var(--art-inset);
  overflow: hidden;
  background: #080909;
  box-shadow: 0 2px 7px #000a, 0 0 0 1px #bfa98426;
}
.work-hover-track { transition: transform 520ms cubic-bezier(.22,.7,.2,1); }
.work-hover-slide { height: var(--art-height); position: relative; overflow: hidden; }
.work-hover-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-cover-crop { position:relative; width:100%; height:100%; overflow:hidden; }
.work-cover-crop > img { position:absolute; left:0; bottom:0; width:var(--cover-width); height:auto; max-width:none; transform:translateY(calc(var(--cover-foot) + 1px)); }
.work-hover-slide .work-cover-missing { padding: 20px; background: #0b0c0d; }
.work-hover-slide .work-cover-missing b { font-size: 48px; }
.work-hover-caption {
  width: calc(100% - var(--frame-width) * 2);
  min-height: 28px;
  margin: 5px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 5px;
  box-sizing: border-box;
  /* An open inscription aligned with the frame's inner edges. */
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: #d8cdb7;
  text-shadow: 0 1px 2px #0008;
  font: 12px/1.4 var(--site-sans, Arial, sans-serif);
  letter-spacing: .015em;
}
.work-hover-caption span:first-child {
  min-width: 0;
  font-family: var(--site-display, Georgia, serif);
  font-size: 16px;
  line-height: 1.35;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.work-hover-caption span:last-child { flex: none; font-size: 10px; color: #aaa48e; font-variant-numeric: tabular-nums; }
html[data-appearance="light"] .work-hover-caption { color: #5a4b36; text-shadow: none; }
html[data-appearance="light"] .work-hover-caption span:last-child { color: #746b5b; }
.work-cover-missing {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
  background: #102222;
  color: #eee9df;
  gap: 12px;
}
.work-cover-missing b { font: 64px/.95 Georgia, serif; color: #d6bd8e; font-weight: 400; }
.work-cover-missing strong { font: 25px/1.1 Georgia, serif; font-weight: 400; }
.work-cover-missing small { color: #b7beb9; font: 12px/1.6 Arial, sans-serif; }
#ning-water-garden .ng-work-visual { margin: 0 0 24px; max-width: 590px; }
#ning-water-garden .ng-work-visual img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
#ning-water-garden .ng-work-visual .work-cover-missing { min-height: 180px; }
#ning-water-garden .ng-work-visual figcaption { font-size: 11px; color: var(--ng-muted); margin-top: 8px; }
.work-magnifier {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.work-magnifier.is-visible { visibility: visible; opacity: 1; }
.work-magnifier img {
  display: block;
  width: 100%;
  height: 100%;
  /* Place the transparent lens centre exactly over the real pointer hotspot. */
  transform: translate(-35.4%, -34%);
  filter: drop-shadow(0 2px 2px #0009);
  pointer-events: none;
  user-select: none;
}
body.motion-off .work-hover-track,
body.motion-off .work-hover-card,
body.motion-off .work-hover.is-visible .work-hover-card,
body.motion-off .work-hover,
body.motion-off .work-hover.is-visible { transition: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  #ning-water-garden .ng-project-toggle.has-magnifier-pointer,
  #ning-water-garden .ng-project-toggle.has-magnifier-pointer * { cursor: none; }
}
@media (prefers-reduced-motion: reduce) {
  .work-hover-track, .work-hover-card, .work-hover.is-visible .work-hover-card, .work-hover, .work-hover.is-visible { transition: none; }
}
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .work-hover, .work-magnifier { display: none; }
}
.work-hover[hidden]{display:none}

/* The same antique frame opens in the browser's modal top layer. */
html.work-zoom-locked { overflow: hidden; }
.work-zoom {
  --preview-size: min(1000px, calc(100vw - 80px), calc((100svh - 130px) / var(--outer-ratio)));
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 54px 20px 32px;
  border: 0;
  background: transparent;
  color: #eee9df;
  overflow: hidden;
  overscroll-behavior: contain;
}
.work-zoom[open] { display: grid; place-items: center; }
.work-zoom::backdrop { background: #02060700; }
.work-zoom-card {
  width: var(--preview-size);
  transform-origin: center;
  filter: none;
  will-change: transform, opacity;
}
.work-zoom-close {
  position: absolute;
  z-index: 2;
  top: max(14px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border: 1px solid #bfa98466;
  border-radius: 50%;
  background: #121817;
  color: #eee4d3;
  font: 30px/1 Arial, sans-serif;
}
.work-zoom-close:hover { background: #2d3028; }
.work-zoom-art { position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%,-50%); will-change:transform; }
.work-zoom-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-entry-web { position:absolute; left:50%; top:50%; transform-origin:50% 0; overflow:hidden; background:#090f10; pointer-events:none; will-change:transform,opacity; contain:paint; }
.work-entry-web .case-page { min-height:100%; }
.work-zoom-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.work-zoom.is-entering { pointer-events:none; }
.work-zoom.is-entering::backdrop { animation:work-entry-backdrop var(--work-entry-duration,1440ms) linear forwards; }
@keyframes work-entry-backdrop { 0% { background:#02060700; } 24%,62% { background:#020607e8; } 94%,100% { background:#02060700; } }
.work-zoom .work-hover-caption { min-height: 42px; height: auto; padding: 10px 16px; }
.work-zoom h2 { margin: 0; font: 16px/1.2 Georgia, serif; font-weight: 400; }
.work-zoom .work-cover-missing { background: transparent; }
/* The wide release artwork gets an equally wide aperture, with an even mat. */
.work-hover[data-work="ng-fellou"] {
  --work-preview-grow: 1.14;
}
.work-hover[data-work="ng-fellou"], .work-zoom[data-work="ng-fellou"] {
  --work-mat-ratio: .04;
}
@media (max-width: 760px) {
  .work-zoom { --preview-size: min(calc(100vw - 24px), calc((100svh - 140px) / var(--outer-ratio))); padding-inline: 12px; }
  .work-zoom .work-hover-caption { width: 92%; }
  .work-zoom .work-cover-missing { padding: 14px; gap: 8px; }
  .work-zoom .work-cover-missing b { font-size: 36px; }
  .work-zoom .work-cover-missing strong { font-size: 22px; }
}

.ng-thesis-placeholder{cursor:default;opacity:.65;pointer-events:none}