/* detail-panel.css — the desktop split view: a work page opens in the right
   half of the screen, in an iframe, while the page it was picked from stays in
   the left half. Shared by the home (index.html) and the Work index (/op),
   with js/detail-panel.js. Each page says for itself what shrinks to the left
   half (style.css: .page-shell; op.css: main and the footer); the header's
   half is in header.css. Below 1024px there is no panel — links open the
   work page on its own. The fallbacks are for /op, which has no style.css. */
.detail-panel {
  position: fixed;
  top: 0; right: 0;
  width: 50vw;
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));   /* snappier — 520ms felt laggy */
  z-index: 120;
  will-change: transform;
}
.detail-panel.is-open { transform: translateX(0); }
.detail-panel-bar {
  flex-shrink: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);   /* tighter than the page gutter */
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  font-family: var(--sans);
  font-size: var(--text-body);
  letter-spacing: 0.04em;
}
.detail-panel-full-link, .detail-panel-close {
  font-family: var(--sans);
  font-size: inherit;
  color: var(--ink-soft, #AEADA6);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 200ms;
}
.detail-panel-full-link:hover, .detail-panel-close:hover { color: var(--accent, #0000FF); opacity: 1; }
.detail-panel-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg);
}