.work-entry{min-height:44svh;display:grid;place-items:center;padding:35px 0 70px}
/* Explicit selectors and vh fallback support older desktop browsers. */
body.work-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body.work-page>header{flex-shrink:0}
body.work-page>.portfolio{flex:1 0 auto}
body.work-page>footer{margin-top:auto;flex-shrink:0;padding-bottom:24px}
.work-enter{position:relative;width:190px;height:190px;border-radius:50%;border:1px solid #ffffff90;background:linear-gradient(135deg,#ffffff65,#ffffff12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#81766e;font:400 24px Fraunces,Georgia,serif;box-shadow:inset 0 0 24px #ffffff50,0 12px 40px #73635712}
.work-enter::before,.work-enter::after{content:'';position:absolute;inset:-1px;border:1px solid #b9b0aa90;border-radius:50%;pointer-events:none;animation:entry-pulse 3.6s ease-out infinite}
.work-enter::after{animation-delay:1.8s}
@keyframes entry-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.28);opacity:0}}
dialog.work-reels{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#eeece9;color:#81766e;overflow:hidden}
.work-reels::backdrop{background:#eeece9}
.work-reels::before{content:'';position:absolute;inset:-15%;pointer-events:none;background:radial-gradient(ellipse at 25% 35%,#b9b0aa55,transparent 58%),radial-gradient(ellipse at 75% 70%,#cec6c260,transparent 60%);animation:reels-ambient 20s ease-in-out infinite alternate}
@keyframes reels-ambient{to{transform:translate3d(4%,3%,0) scale(1.08)}}
.work-reels .design-carousel{position:relative;max-width:none;height:100%}
.work-reels .design-track{height:100%;display:block;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.work-reels .design-slide{height:100%;width:100%;padding:72px max(6vw,24px) 88px;display:flex;flex-direction:column;align-items:center;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always}
.work-reels .design-art{height:auto;min-height:0;max-height:none;flex:1;width:100%;max-width:1200px}
.work-reels .design-art img{width:100%;height:100%;min-height:0;max-width:none;max-height:none;object-fit:contain}
.work-reels figcaption{flex:none;width:100%;padding:18px 0 0}
.work-reels .design-controls{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0}
.reels-close{position:absolute;right:max(22px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:#ffffff50;backdrop-filter:blur(12px);color:inherit;font:300 34px/1 Arial}
.work-reels .design-track.is-dragging{scroll-snap-type:none}
html[data-theme=dark] .work-enter{color:#d1c4b8;border-color:#d1c4b840;background:linear-gradient(135deg,#ffffff15,#ffffff04);box-shadow:inset 0 0 24px #ffffff08,0 12px 40px #0002}
html[data-theme=dark] dialog.work-reels,html[data-theme=dark] .work-reels::backdrop{background:#191817;color:#d1c4b8}
html[data-theme=dark] .work-reels::before{background:radial-gradient(ellipse at 25% 35%,#51443b80,transparent 58%),radial-gradient(ellipse at 75% 70%,#302b2770,transparent 60%)}
html[data-theme=dark] .reels-close{background:#ffffff12}
@media(max-width:700px){.work-reels .design-slide{padding:72px 18px 86px}.work-reels .design-slide h2{font-size:26px}.work-enter{width:165px;height:165px;font-size:22px}}
@media(prefers-reduced-motion:reduce){.work-enter::before,.work-enter::after,.work-reels::before{animation:none}}
.portfolio:has(.work-entry) .intro h1{font-style:normal}
body:has(.work-entry){display:flex;flex-direction:column;min-height:100dvh}
body:has(.work-entry)>header{flex-shrink:0}
body:has(.work-entry)>.portfolio{flex:1}
.work-reels .design-slide{padding-right:142px}
.reels-filmstrip{position:absolute;z-index:2;top:82px;bottom:82px;right:22px;left:auto;width:92px;height:auto;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:12px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;border:1px solid #ffffff60;border-radius:24px;background:#ffffff40;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.reels-filmstrip::-webkit-scrollbar{display:none}
.reels-thumb{display:block;flex:0 0 76px;width:66px;height:76px;padding:3px;border:1px solid transparent;border-radius:10px;background:transparent;opacity:.55;transition:opacity .2s,border-color .2s,background-color .2s}
.reels-thumb[aria-current=true]{opacity:1;border-color:#8b7b72;background:#ffffff60}
.reels-thumb:hover,.reels-thumb:focus-visible{opacity:1}
.work-reels .reels-thumb img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:6px}
html[data-theme=dark] .reels-filmstrip{background:#302b2760;border-color:#d1c4b830}
html[data-theme=dark] .reels-thumb[aria-current=true]{border-color:#d1c4b8;background:#ffffff15}
@media(max-width:700px){
 .work-reels .design-slide{padding:72px 18px calc(170px + env(safe-area-inset-bottom))}
 .work-reels .design-controls{bottom:calc(110px + env(safe-area-inset-bottom))}
 .reels-filmstrip{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));left:14px;right:14px;width:auto;height:86px;padding:9px;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;border-radius:20px;touch-action:pan-x}
 .reels-thumb{flex:0 0 54px;width:54px;height:66px}
}
.reels-filmstrip{width:70px;padding:8px;gap:7px;border-radius:18px}
.reels-thumb{flex-basis:58px;width:52px;height:58px;padding:2px;transition:opacity .08s,border-color .08s,background-color .08s}
.work-reels .design-slide{padding-right:116px}
@media(max-width:700px){
 .reels-filmstrip{width:auto;height:64px;padding:6px;gap:6px;border-radius:16px}
 .reels-thumb{flex-basis:40px;width:40px;height:50px}
 .work-reels .design-slide{padding:72px 18px calc(148px + env(safe-area-inset-bottom))}
 .work-reels .design-controls{bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* Desktop reel fixes: keep artwork inside the viewport and preserve a real
   scrollable interaction surface beside the filmstrip. */
@media(min-width:701px){
 dialog.work-reels{height:var(--reel-height,100vh);max-height:var(--reel-height,100vh);}
 .work-reels .design-carousel{height:var(--reel-height,100vh);}
 .work-reels .design-track{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior-y:contain;}
 .work-reels .design-track::-webkit-scrollbar{display:none}
 .work-reels .design-slide{height:100%;min-height:0;overflow:hidden;padding:56px 126px 92px 40px;}
 .work-reels .design-art{flex:0 0 auto;min-height:0;width:100%;max-width:1200px;height:calc(var(--reel-height,100vh) - 250px);max-height:calc(var(--reel-height,100vh) - 250px);}
 .work-reels .design-art img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}
 .work-reels .reels-filmstrip{pointer-events:auto;}
 /* Match the slide center: (40px left padding - 126px right padding) / 2. */
 .work-reels .design-controls{left:calc(50% - 43px);}
}