.portfolio-web-mockup { background:#E9E9E9; isolation:isolate; }
.portfolio-web-mockup__image { position:absolute; inset:0; cursor:zoom-in; }
.portfolio-web-mockup__device { position:absolute; width:100%; aspect-ratio:1672 / 941; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.portfolio-web-mockup__hardware { display:block; width:100%; height:auto; user-select:none; }
.portfolio-web-mockup__screen { position:absolute; left:18.48086%; top:8.60786%; width:63.03828%; height:55.68544%; overflow:hidden; border-radius:2px; background:#fff; }
.portfolio-web-mockup__screen > img { display:block; width:100%; max-width:none; height:auto; object-fit:initial; user-select:none; }
.portfolio-web-mockup__image:focus-visible { outline:2px solid #555; outline-offset:-3px; }
.portfolio-mockup-toggle { position:absolute; bottom:14px; left:14px; z-index:4; display:grid; place-items:center; width:36px; height:36px; padding:8px; border:1px solid #0002; border-radius:50%; background:#ffffffe0; color:#444; cursor:pointer; }
.portfolio-mockup-toggle[hidden] { display:none; }
.portfolio-mockup-toggle:hover { background:#fff; }
.portfolio-mockup-toggle:focus-visible { outline:2px solid #555; outline-offset:3px; }
.portfolio-mockup-toggle svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; }
.portfolio-mockup-toggle .play, .portfolio-mockup-toggle[data-paused="true"] .pause { display:none; }
.portfolio-mockup-toggle[data-paused="true"] .play { display:block; }
.portfolio-web-mockup .portfolio-image-zoom { width:36px; height:36px; padding:8px; color:#444; border-color:#0002; background:#ffffffe0; }
.portfolio-web-mockup .portfolio-image-zoom:focus-visible { outline-color:#555; }
@media (pointer:coarse) { .portfolio-mockup-toggle, .portfolio-web-mockup .portfolio-image-zoom { width:44px; height:44px; padding:11px; } }

/* A static editorial overview. All crops use the same untouched source file. */
.portfolio-web-overview { background:#E9E9E9; isolation:isolate; }
.portfolio-web-overview__image { position:absolute; inset:0; cursor:zoom-in; }
.portfolio-web-overview__image:focus-visible { outline:2px solid #555; outline-offset:-3px; }
.portfolio-web-overview__board { position:absolute; inset:4.5% 4.5% 12%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto minmax(0,1fr); gap:3%; pointer-events:none; }
.portfolio-web-overview__crop { position:relative; overflow:hidden; background:white; }
.portfolio-web-overview__crop img { display:block; width:100%; max-width:none; height:auto; user-select:none; }
.portfolio-web-overview__hero { grid-column:1 / -1; aspect-ratio:1464 / 528; }
.portfolio-web-overview__archive img { transform:translateY(-20%); }
.portfolio-web-overview__concept img { transform:translateY(-67.8%); }
.portfolio-web-overview--single .portfolio-web-overview__hero,
.portfolio-web-overview--day .portfolio-web-overview__hero { aspect-ratio:1464 / 920; }
.portfolio-web-overview__timetable img { transform:translateY(-20.5%); }
.portfolio-web-overview__past img { transform:translateY(-62.8%); }
.portfolio-web-overview__open { position:absolute; right:4.5%; bottom:3%; display:grid; place-items:center; width:44px; height:44px; padding:11px; color:#444; background:#ffffffe0; border:1px solid #0002; border-radius:50%; cursor:pointer; transition:background .2s; }
.portfolio-web-overview__open span { display:none; }
.portfolio-web-overview__open svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .2s; }
.portfolio-web-overview__open:hover { background:#fff; }
.portfolio-web-overview__open:hover svg { transform:translate(2px,-2px); }
.portfolio-web-overview__open:focus-visible { outline:2px solid #555; outline-offset:3px; }
.portfolio-web-overview--single .portfolio-web-overview__open,
.portfolio-web-overview--day .portfolio-web-overview__open { right:14px; bottom:14px; color:#fff; background:#161616b8; border-color:#ffffff80; }
.portfolio-web-overview--single .portfolio-web-overview__open:hover,
.portfolio-web-overview--day .portfolio-web-overview__open:hover { background:#161616; transform:scale(1.06); }
.portfolio-web-overview--single .portfolio-web-overview__open:focus-visible,
.portfolio-web-overview--day .portfolio-web-overview__open:focus-visible { outline-color:#fff; }
@media (pointer:coarse) { .portfolio-web-overview__open { min-height:44px; } }
@media (max-width:640px) {
  .portfolio-web-overview__board { display:block; top:12%; bottom:auto; }
  .portfolio-web-overview__archive, .portfolio-web-overview__concept { display:none; }
  .portfolio-web-overview__open { bottom:3%; }
}
@media (prefers-reduced-motion:reduce) { .portfolio-web-overview__open svg { transition:none; } }

/* The full page is opt-in, readable at screen width, and never auto-scrolls. */
.portfolio-lightbox--page { padding:0; color:#333; background:#E9E9E9; }
.portfolio-lightbox--page[open] { grid-template-rows:minmax(0,1fr); }
.portfolio-lightbox--page::backdrop { background:#E9E9E9; }
.portfolio-lightbox__header { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; height:100%; padding:0 80px 0 24px; border-bottom:1px solid #0001; }
.portfolio-lightbox__title { font-size:14px; letter-spacing:.02em; }
.portfolio-lightbox__header nav { display:flex; gap:20px; flex-shrink:0; }
.portfolio-lightbox__header button { min-height:44px; padding:0; border:0; background:none; color:#333; font-size:14px; cursor:pointer; }
.portfolio-lightbox__header button:hover { text-decoration:underline; text-underline-offset:5px; }
.portfolio-lightbox__header button:focus-visible { outline:2px solid #555; outline-offset:3px; }
.portfolio-lightbox--page .portfolio-lightbox__figure { display:block; overflow-y:auto; overscroll-behavior:contain; pointer-events:auto; scrollbar-gutter:stable; }
.portfolio-lightbox--page .portfolio-lightbox__figure:focus-visible { outline:2px solid #777; outline-offset:-2px; }
.portfolio-lightbox--page .portfolio-lightbox__image { width:min(100%,1200px); height:auto; max-height:none; margin:0 auto; object-fit:initial; }
.portfolio-lightbox--page .portfolio-lightbox__caption { display:none; }
.portfolio-lightbox--page .portfolio-lightbox__close { border:0; border-radius:0; background:none; color:#333; }
.portfolio-lightbox--page .portfolio-lightbox__close:focus-visible { outline-color:#555; }
@media (max-width:800px) {
  .portfolio-lightbox__title { display:none; }
  .portfolio-lightbox__header { padding-left:16px; }
  .portfolio-lightbox__header nav { gap:16px; }
  .portfolio-lightbox__header button { font-size:13px; }
}