/* Portfolio previews, compact case dialogs, and their shared media player. */
.icon-button { display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid #15221f40;border-radius:50%;background:#faf8f3ed;color:var(--ink); }
.icon-button svg,.project-meta i svg { display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.icon-button:hover:not(:disabled) { background:var(--lime); }
.icon-button:disabled { visibility:hidden;pointer-events:none; }
.icon-button:focus-visible { outline:3px solid #347d44;outline-offset:3px; }
.project-meta i { line-height:0; }
.project-meta i svg { width:16px;height:16px; }
.project-card-shell { position:relative;min-width:0;display:flex; }
.project-card-shell .project-card { width:100%; }
.project-image,.dialog-image,.media-player { touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain; }
.project-image img { user-select:none; }
.preview-controls { position:absolute;inset:10px 10px auto;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:space-between;pointer-events:none;opacity:0;transition:opacity .18s; }
.preview-controls .icon-button { pointer-events:auto;width:34px;height:34px;margin:0 5px; }
.preview-count { position:absolute;left:50%;bottom:7px;transform:translateX(-50%);padding:4px 7px;border-radius:20px;background:#faf8f3eb;font:9px var(--mono);white-space:nowrap; }
.project-card-shell:hover .preview-controls,.project-card-shell:focus-within .preview-controls { opacity:1; }
html:has(.project-dialog[open],.media-player[open]) { overflow:hidden; }
.project-dialog { width:min(calc(50vw + 560px),calc(100% - 20px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #0005;overflow:auto;overscroll-behavior:contain; }
.project-dialog::backdrop { background:rgb(10 18 15 / 50%);backdrop-filter:blur(6px); }
.dialog-header { position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 16px;background:var(--paper);border-bottom:1px solid var(--line); }
.dialog-project-nav { display:flex;align-items:center;gap:18px; }
.dialog-project-nav span { font:10px var(--mono);color:var(--muted); }
.dialog-close { background:var(--lime); }
.dialog-content { display:grid;grid-template-columns:1.15fr 1fr;align-items:start;gap:28px;padding:20px; }
.dialog-image { position:relative;min-width:0;aspect-ratio:16 / 9;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:#e7e3d8; }
.dialog-image img,.dialog-image video { display:block;width:100%;height:100%;min-height:0;object-fit:contain;grid-area:1 / 1; }
.dialog-image [hidden],.media-player [hidden] { display:none; }
.dialog-image img { cursor:zoom-in;user-select:none; }
.dialog-expand { position:absolute;right:10px;top:10px;z-index:2; }
.dialog-arrow { position:absolute;top:50%;transform:translateY(-50%);z-index:2; }
.dialog-prev { left:10px; }.dialog-next { right:10px; }
.dialog-count { position:absolute;bottom:10px;left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:20px;background:#faf8f3ed;font:10px var(--mono);white-space:nowrap; }
.dialog-copy { min-width:0;padding:6px 4px; }
.dialog-copy .eyebrow { margin-bottom:12px;font-size:10px; }
.dialog-copy h2 { margin:0 0 16px;font-size:clamp(25px,2.8vw,36px);line-height:1.12; }
.dialog-description p { text-wrap:pretty;margin:0 0 12px;color:#626a61;font-size:14px;line-height:1.65; }
.dialog-description p:last-child { margin-bottom:0; }
.dialog-tags { display:flex;flex-wrap:wrap;gap:6px;margin-top:18px; }
.dialog-tags span { padding:6px 9px;border:1px solid #b7baad;border-radius:20px;font:9px var(--mono); }
.media-player { position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:white;overflow:hidden; }
.media-player[open] { display:flex;align-items:center;justify-content:center; }
.media-player::backdrop { background:rgb(0 0 0 / 50%);backdrop-filter:blur(12px); }
.media-player>video { display:block;width:auto;height:auto;max-width:calc(100vw - 56px);max-height:calc(100dvh - 50px);object-fit:contain;border-radius:6px;user-select:none; }
.player-image-frame { position:relative;flex:none;width:min(calc(100vw - 56px),calc((100dvh - 50px) * var(--media-aspect, 1.7778)));aspect-ratio:var(--media-aspect, 1.7778);overflow:hidden;border-radius:6px; }
.player-image-frame img { position:absolute;max-width:none;object-fit:fill;user-select:none; }
.media-player .icon-button { position:absolute;z-index:2;background:rgb(20 28 24 / 78%);color:white;border-color:#ffffff80; }
.media-player .icon-button:hover:not(:disabled) { background:#35443c; }
.player-close { top:16px;right:16px; }
.player-prev { top:50%;left:12px;transform:translateY(-50%); }
.player-next { top:50%;right:12px;transform:translateY(-50%); }
.player-count { position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:7px 12px;border-radius:20px;background:#101712bf;font:11px/1.4 var(--mono);text-align:center; }
@media (hover:none) { .preview-controls { opacity:1; } }
@media (max-width:680px) {
  .project-meta i svg { width:14px;height:14px; }
  .preview-controls { inset:6px 6px auto; }
  .preview-controls .icon-button { width:30px;height:30px;margin:0 3px; }
  .preview-count { font-size:8px;bottom:4px; }
  .project-dialog { width:calc(100% - 10px);max-height:calc(100dvh - 20px);border-radius:10px; }
  .dialog-header { padding:8px 10px; }
  .dialog-project-nav { gap:14px; }
  .dialog-content { display:flex;flex-direction:column;gap:18px;padding:12px; }
  .dialog-image { width:100%;flex:none; }
  .dialog-copy { padding:0 4px 6px; }
  .dialog-copy h2 { font-size:26px; }
  .dialog-description p { font-size:13px; }
  .dialog-tags { margin-top:14px; }
  .dialog-arrow,.dialog-expand { width:36px;height:36px; }
  .media-player { padding:10px; }
  .media-player>video { max-width:calc(100vw - 10px);max-height:calc(100dvh - 116px); }
  .player-image-frame { width:min(calc(100vw - 10px),calc((100dvh - 116px) * var(--media-aspect, 1.7778))); }
  .player-close { top:max(12px,env(safe-area-inset-top));right:12px; }
  .player-prev { left:12px; }.player-next { right:12px; }
  .player-count { bottom:max(18px,env(safe-area-inset-bottom));font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .preview-controls { transition:none; } }

/* Clip local slides to their preview; full-screen slides travel beyond the viewport. */
.project-image { position:relative; }
.media-outgoing { z-index:1;object-fit:contain;user-select:none; }
.project-image>.media-outgoing,.dialog-image>.media-outgoing { mix-blend-mode:normal; }
.player-image-frame,.media-player>video { z-index:1; }
.player-peek { position:absolute;top:50%;transform:translateY(-50%);z-index:0;width:min(80vw,calc((100dvh - 140px) * var(--media-aspect,1.7778)));aspect-ratio:var(--media-aspect,1.7778);padding:0;border:1px solid #ffffff45;border-radius:8px;overflow:hidden;background:var(--paper);box-shadow:0 8px 30px #0005;opacity:.8; }
.player-peek-prev { right:calc(100% - 16px); }
.player-peek-next { left:calc(100% - 16px); }
.player-peek img { position:absolute;max-width:none;pointer-events:none; }
.player-peek video { display:block;width:100%;height:100%;object-fit:cover;pointer-events:none; }
.player-peek:hover,.player-peek:focus-visible { opacity:1; }
.player-peek:focus-visible { outline:2px solid white;outline-offset:-3px; }
@media (max-width:680px) {
  .media-player>video { max-width:calc(100vw - 48px); }
  .player-image-frame { width:min(calc(100vw - 48px),calc((100dvh - 116px) * var(--media-aspect,1.7778))); }
  .player-peek-prev { right:calc(100% - 12px); }.player-peek-next { left:calc(100% - 12px); }
}