/* Compact editorial previews, independent of the page's color treatment. */
.detail .project-edge-link{width:clamp(72px,7vw,112px)}
.detail .project-edge-preview{
  --preview-radius:28.8px;--preview-inset:8px;
  width:320px;height:auto;min-height:0;max-height:calc(100svh - 160px);
  padding:var(--preview-inset);display:flex;flex-direction:column;
  background:#faf7f1;color:var(--text-default);
  border:0;border-radius:var(--preview-radius);
  box-shadow:0 16px 44px #29272220;
  overflow:auto;clip-path:none;
  transition:opacity .2s ease,transform .3s cubic-bezier(.2,.7,.3,1),visibility .2s;
}
.detail .project-edge-preview:after{display:none}
.detail .project-edge-preview>img{
  width:100%;height:auto;aspect-ratio:16/10;flex:none;
  object-fit:cover;object-position:center;border:0;border-radius:calc(var(--preview-radius) - var(--preview-inset));
  background:transparent;filter:none;transform:none;transition:none;
}
.detail .project-edge-link:hover .project-edge-preview>img,
.detail .project-edge-link:focus-visible .project-edge-preview>img{transform:none;filter:none}
.detail .project-edge-preview>i{
  position:static;inset:auto;display:block;padding:20px 14px 12px;
}
.detail .project-edge-preview i>span{gap:10px}
.detail .project-edge-preview small{
  font-size:12px;line-height:1.5;letter-spacing:.06em;opacity:.65;white-space:normal;
}
.detail .project-edge-preview strong{
  font-size:32px;font-weight:520;line-height:1.08;letter-spacing:-.045em;
  color:var(--text-default);text-wrap:balance;
}
.detail .project-edge-preview em{
  min-height:0;margin-top:12px;padding:16px 0 0;
  border:0;border-radius:0;
  background:none;box-shadow:none;color:inherit;
  justify-content:space-between;gap:16px;font-size:12px;line-height:1.4;
}
.detail .project-edge-preview svg{width:18px;height:18px;stroke-width:1.5;flex:none}
.detail .project-edge-previous .project-edge-preview{
  left:16px;transform-origin:left center;transform:translate(-12px,-50%) scale(.8);clip-path:none;
}
.detail .project-edge-next .project-edge-preview{
  right:16px;transform-origin:right center;transform:translate(12px,-50%) scale(.8);clip-path:none;
}
.detail .project-edge-link:hover .project-edge-preview,
.detail .project-edge-link:focus-visible .project-edge-preview{
  visibility:visible;opacity:1;pointer-events:auto;transform:translate(0,-50%) scale(.8);clip-path:none;
}
.detail .project-edge-link:focus-visible .project-edge-preview{
  outline:2px solid var(--text-default);outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .detail .project-edge-preview{transition:none}
}

/* Dark navigation previews for Future Kitchen. */
.detail-miele .project-edge-preview{
  --text-default:#f5f3ee;
  background:#222321;color:var(--text-default);
  box-shadow:0 16px 44px #00000050;
}

/* Muted navigation labels on both light and dark previews. */
.detail .project-edge-preview em{color:#73716c}
.detail-miele .project-edge-preview em{color:#aaa9a5}

/* Place previews beside the pointer; retain a centered keyboard fallback. */
.detail .project-edge-link .project-edge-preview{
  position:fixed;top:var(--preview-y,calc(50vh - 140px));
  left:var(--preview-x,16px);right:auto;
  width:min(320px,calc((100vw - 24px)/.8));
  max-height:calc((100svh - 24px)/.8);
  transform-origin:top left;transform:scale(.8);
}
.detail .project-edge-next .project-edge-preview{left:var(--preview-x,calc(100vw - 272px))}
.detail .project-edge-link:hover .project-edge-preview,
.detail .project-edge-link:focus-visible .project-edge-preview{transform:scale(.8)}

/* Shared left text alignment with navigation arrows on the right. */
.detail .project-edge-preview>i,
.detail .project-edge-preview i>span,
.detail .project-edge-preview small,
.detail .project-edge-preview strong,
.detail .project-edge-preview em{text-align:left}
.detail .project-edge-preview em{display:flex;flex-direction:row;justify-content:space-between;width:100%}
.detail .project-edge-preview em svg{order:1;margin-left:auto}

/* The closing project block and footer own their pointer interactions. */
.detail .project-edge-link[data-footer-blocked="true"]{pointer-events:none}
.detail .project-edge-link[data-footer-blocked="true"] .project-edge-preview{visibility:hidden;opacity:0;pointer-events:none;transition:none}

/* Match the actual section behind each preview, including keyboard focus. */
.detail .project-edge-link .project-edge-preview{
  --text-default:var(--preview-ink,var(--case-ink,#242823));
  background:var(--preview-surface,var(--case-base,#faf7f1));
  color:var(--text-default);
  box-shadow:0 16px 44px #00000026,inset 0 0 0 1px color-mix(in srgb,currentColor 8%,transparent);
}
.detail .project-edge-link .project-edge-preview em{color:inherit;opacity:.75}

/* Anchor horizontally to the window, not to the pointer. */
.detail .project-edge-link .project-edge-preview{
  left:16px;right:auto;width:min(320px,calc((100vw - 32px)/.8));
  max-height:calc((100svh - 32px)/.8);transform-origin:top left;
}
.detail .project-edge-next .project-edge-preview{left:auto;right:16px;transform-origin:top right}
.detail-miele .project-edge-link .project-edge-preview{background:var(--preview-surface,#222321)}