/* Centered project viewer, following feedback 741. */
.portfolio-case { --canvas-width:720px; --reading-width:630px; --art-scale:.375; --content-factor:.729166667; }
html { scrollbar-gutter:stable; }
.case-context { position:fixed; inset:0; width:100%; height:100%; border:0; pointer-events:none; filter:blur(8px); opacity:.8; z-index:0; }
.case-dismiss { position:fixed; top:0; bottom:0; z-index:1; width:max(0px,calc((100% - var(--canvas-width)) / 2)); background:rgba(255,255,255,.64); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.case-dismiss-left { left:0; }
.case-dismiss-right { right:0; }
.case-dismiss:focus-visible { outline:1px solid var(--surround-ink); outline-offset:-12px; }
html[data-project="insta"] .case-dismiss { background:rgba(0,0,0,.74); }
.portfolio-case main { position:relative; z-index:2; width:var(--canvas-width); max-width:100%; margin-inline:auto; background:var(--surround); }
.portfolio-case .portfolio-header { position:sticky; top:0; z-index:3; background:transparent; pointer-events:none; }
.portfolio-case .portfolio-header::before { content:''; position:absolute; inset-block:0; left:50%; width:var(--canvas-width); max-width:100%; transform:translateX(-50%); background:var(--surround); z-index:-1; }
.portfolio-case .case-back { pointer-events:auto; }
.portfolio-case .portfolio-footer { position:relative; z-index:2; width:var(--canvas-width); max-width:100%; background:var(--surround); margin:0 auto; }
.case-progress { position:fixed; z-index:5; top:50%; left:calc(50% + 376px); width:44px; transform:translateY(-50%); color:var(--surround-ink); font:400 10px/1.5 var(--chrome-font); }
.case-progress-meter { position:absolute; left:0; top:33px; bottom:0; width:1px; background:var(--chrome-line); overflow:hidden; }
.case-progress-meter i { display:block; height:100%; background:currentColor; transform:scaleY(0); transform-origin:top; }
.case-chapters summary { list-style:none; white-space:nowrap; margin:0 0 9px; pointer-events:none; }
.case-chapters summary::-webkit-details-marker { display:none; }
.case-chapters ol { margin:0; padding:0; list-style:none; }
.case-chapters a { display:flex; position:relative; align-items:center; justify-content:center; width:44px; height:32px; color:inherit; text-decoration:none; }
.case-chapters a i { display:block; height:1px; width:24px; transform:scaleX(.4167); background:currentColor; opacity:.35; transition:transform 220ms,opacity 220ms; }
.case-chapters a[aria-current] i,.case-chapters a:hover i,.case-chapters a:focus-visible i { transform:scaleX(1); opacity:1; }
.case-chapter-title { position:absolute; right:42px; padding:7px 10px; background:var(--surround); color:var(--surround-ink); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 160ms; font-family:var(--case-font); font-size:11px; }
.case-chapters a:hover .case-chapter-title,.case-chapters a:focus-visible .case-chapter-title { opacity:1; }
.case-chapters a:focus-visible,.case-chapters summary:focus-visible { outline:1px solid currentColor; outline-offset:2px; }
@media(min-width:841px) { .case-chapters:not([open])>ol { display:block; } }
@media(max-width:840px) {
  .case-context,.case-dismiss { display:none; }
  .portfolio-case .portfolio-header { position:sticky; background:var(--surround); }
  .case-progress { left:auto; right:24px; top:14px; width:auto; transform:none; }
  .case-progress-meter { display:none; }
  .case-chapters summary { pointer-events:auto; min-width:62px; min-height:44px; display:flex; align-items:center; justify-content:flex-end; margin:0; cursor:pointer; }
  .case-chapters summary::after { content:''; margin-left:10px; width:5px; height:5px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); }
  .case-chapters[open] ol { position:absolute; top:48px; right:0; width:min(280px,calc(100vw - 48px)); padding:12px; max-height:70vh; overflow:auto; background:var(--surround); border:1px solid var(--chrome-line); box-shadow:0 10px 28px #00000012; }
  .case-chapters a { width:100%; min-height:44px; height:auto; justify-content:space-between; gap:12px; padding:8px; }
  .case-chapter-title { position:static; opacity:1; white-space:normal; padding:0; font-size:12px; }
  .case-chapters a i { flex-shrink:0; }
  .portfolio-case .composition-window.is-enlarged .composition { zoom:.462857143; }
}
@media(prefers-reduced-motion:reduce) { .case-chapters a i,.case-chapter-title { transition:none; } }